diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
index 7064f37dc0f..410a0417f15 100644
--- a/packages/admin-ui/package.json
+++ b/packages/admin-ui/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
@@ -30,6 +31,7 @@
     "ace-builds": "^1.37.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
     "mobx": "^6.9.0",
     "react": "18.2.0",
     "react-ace": "^13.0.0",
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
new file mode 100644
index 00000000000..b8a2ae70fcd
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoComplete } from "./AutoComplete";
+
+const meta: Meta<typeof AutoComplete> = {
+    title: "Components/Form/AutoComplete",
+    component: AutoComplete,
+    tags: ["autodocs"],
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <AutoComplete {...args} value={value} onValueChange={setValue} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.tsx b/packages/admin-ui/src/AutoComplete/AutoComplete.tsx
new file mode 100644
index 00000000000..20ee412883d
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import {
+    AutoCompletePrimitive,
+    AutoCompletePrimitiveProps
+} from "./primitives/AutoCompletePrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
+
+const DecoratableAutoComplete = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: AutoCompleteProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} />
+            <AutoCompletePrimitive {...props} disabled={disabled} label={label} />
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <FormComponentNote text={note} />
+        </div>
+    );
+};
+
+const AutoComplete = makeDecoratable("AutoComplete", DecoratableAutoComplete);
+
+export { AutoComplete };
diff --git a/packages/admin-ui/src/AutoComplete/index.ts b/packages/admin-ui/src/AutoComplete/index.ts
new file mode 100644
index 00000000000..099110def8d
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/index.ts
@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./primitives/AutoCompletePrimitive";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx
new file mode 100644
index 00000000000..9b0a0fcfdcc
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx
@@ -0,0 +1,447 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+import { AutoCompletePrimitive } from "./AutoCompletePrimitive";
+import { Button } from "~/Button";
+import { Icon } from "~/Icon";
+
+const meta: Meta<typeof AutoCompletePrimitive> = {
+    title: "Components/Form Primitives/Autocomplete",
+    component: AutoCompletePrimitive,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"w-full"}>
+                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />
+                <div className={"mt-4 text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AutoCompletePrimitive>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <Icon label={"Search"} icon={<SearchIcon />} />
+    }
+};
+
+export const WithLoading: Story = {
+    args: {
+        ...Default.args,
+        isLoading: true
+    }
+};
+
+export const WithoutResetAction: Story = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithPredefinedValue: Story = {
+    args: {
+        ...Default.args,
+        value: "Eastern Standard Time (EST)"
+    }
+};
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const WithCustomEmptyMessage: Story = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
+};
+
+export const WithFormattedOptions: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithCustomOptionRenderer: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est",
+                item: {
+                    name: "Eastern Standard Time (EST)",
+                    time_difference: "-5:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst",
+                item: {
+                    name: "Central Standard Time (CST)",
+                    time_difference: "-6:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst",
+                item: {
+                    name: "Pacific Standard Time (PST)",
+                    time_difference: "-8:00",
+                    flag: "🇺🇸"
+                }
+            },
+            {
+                label: "Greenwich Mean Time (GMT)",
+                value: "gmt",
+                item: {
+                    name: "Greenwich Mean Time (GMT)",
+                    time_difference: "±0:00",
+                    flag: "🇬🇧"
+                }
+            },
+            {
+                label: "Central European Time (CET)",
+                value: "cet",
+                item: {
+                    name: "Central European Time (CET)",
+                    time_difference: "+1:00",
+                    flag: "🇪🇺"
+                }
+            },
+            {
+                label: "Central Africa Time (CAT)",
+                value: "cat",
+                item: {
+                    name: "Central Africa Time (CAT)",
+                    time_difference: "+2:00",
+                    flag: "🇿🇦"
+                }
+            },
+            {
+                label: "India Standard Time (IST)",
+                value: "ist",
+                item: {
+                    name: "India Standard Time (IST)",
+                    time_difference: "+5:30",
+                    flag: "🇮🇳"
+                }
+            },
+            {
+                label: "China Standard Time (CST)",
+                value: "cst_china",
+                item: {
+                    name: "China Standard Time (CST)",
+                    time_difference: "+8:00",
+                    flag: "🇨🇳"
+                }
+            },
+            {
+                label: "Japan Standard Time (JST)",
+                value: "jst",
+                item: {
+                    name: "Japan Standard Time (JST)",
+                    time_difference: "+9:00",
+                    flag: "🇯🇵"
+                }
+            },
+            {
+                label: "Australian Western Standard Time (AWST)",
+                value: "awst",
+                item: {
+                    name: "Australian Western Standard Time (AWST)",
+                    time_difference: "+8:00",
+                    flag: "🇦🇺"
+                }
+            },
+            {
+                label: "New Zealand Standard Time (NZST)",
+                value: "nzst",
+                item: {
+                    name: "New Zealand Standard Time (NZST)",
+                    time_difference: "+12:00",
+                    flag: "🇳🇿"
+                }
+            },
+            {
+                label: "Fiji Time (FJT)",
+                value: "fjt",
+                item: {
+                    name: "Fiji Time (FJT)",
+                    time_difference: "+12:00",
+                    flag: "🇫🇯"
+                }
+            },
+            {
+                label: "Argentina Time (ART)",
+                value: "art",
+                item: {
+                    name: "Argentina Time (ART)",
+                    time_difference: "-3:00",
+                    flag: "🇦🇷"
+                }
+            },
+            {
+                label: "Bolivia Time (BOT)",
+                value: "bot",
+                item: {
+                    name: "Bolivia Time (BOT)",
+                    time_difference: "-4:00",
+                    flag: "🇧🇴"
+                }
+            },
+            {
+                label: "Brasilia Time (BRT)",
+                value: "brt",
+                item: {
+                    name: "Brasilia Time (BRT)",
+                    time_difference: "-3:00",
+                    flag: "🇧🇷"
+                }
+            }
+        ],
+        optionRenderer: item => {
+            return (
+                <div className={"w-full flex justify-between align-middle"}>
+                    <div>
+                        <span className={"mr-sm"}>{item.flag}</span>
+                        {item.name}
+                    </div>
+                    <div className={"text-sm"}>{item.time_difference}</div>
+                </div>
+            );
+        }
+    }
+};
+
+export const WithSeparators: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst", separator: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat", separator: true },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst", separator: true },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt", separator: true },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithDisabledOptions: Story = {
+    args: {
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est", disabled: true },
+            { label: "Central Standard Time (CST)", value: "cst", disabled: true },
+            { label: "Pacific Standard Time (PST)", value: "pst", disabled: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return (
+            <div className={"w-full"}>
+                <div>
+                    <AutoCompletePrimitive
+                        {...args}
+                        value={value}
+                        onValueChange={value => setValue(value)}
+                    />
+                </div>
+                <div className={"mt-4 text-center"}>
+                    <Button text={"Reset"} onClick={() => setValue("")} />
+                </div>
+                <div className={"mt-4 text-center"}>
+                    Current selected value: <pre>{value}</pre>
+                </div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx
new file mode 100644
index 00000000000..a918d7b8d0d
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.tsx
@@ -0,0 +1,140 @@
+import React, { KeyboardEvent } from "react";
+import { Command } from "~/Command";
+import { Popover } from "~/Popover";
+import { InputPrimitiveProps } from "~/Input";
+import { useAutoComplete } from "./useAutoComplete";
+import { AutoCompleteInputIcons, AutoCompleteList } from "./components";
+import { AutoCompleteOption } from "./domains";
+
+type AutoCompletePrimitiveProps = Omit<InputPrimitiveProps, "endIcon"> & {
+    /**
+     * Accessible label for the command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Message to display when there are no options.
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Indicates if the autocomplete is loading options.
+     */
+    isLoading?: boolean;
+    /**
+     * Message to display while loading options.
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Callback triggered to reset the value.
+     */
+    onValueReset?: () => void;
+    /**
+     * List of options for the autocomplete.
+     */
+    options?: AutoCompleteOption[];
+    /**
+     * Custom renderer for the options.
+     */
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Optional selected item.
+     */
+    value?: string;
+    /**
+     * Indicates if the reset action should be displayed.
+     */
+    displayResetAction?: boolean;
+};
+
+const AutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {
+    const { vm, setListOpenState, setSelectedOption, searchOption, resetSelectedOption } =
+        useAutoComplete(props);
+
+    const handleKeyDown = React.useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (!vm.optionsListVm.isOpen) {
+                setListOpenState(true);
+            }
+
+            if (event.key.toLowerCase() === "escape") {
+                setListOpenState(false);
+            }
+
+            if (event.key.toLowerCase() === "backspace") {
+                setListOpenState(true);
+                const inputValue = (event.target as HTMLInputElement).value;
+                setSelectedOption("");
+                searchOption(inputValue);
+            }
+        },
+        [props.disabled, setListOpenState, setSelectedOption]
+    );
+
+    const handleSelectOption = React.useCallback(
+        (value: string) => {
+            setSelectedOption(value);
+            setListOpenState(false);
+        },
+        [setSelectedOption, setListOpenState]
+    );
+
+    return (
+        <Popover open={vm.optionsListVm.isOpen} onOpenChange={() => setListOpenState(true)}>
+            <Command label={props.label} onKeyDown={handleKeyDown}>
+                <Popover.Trigger asChild>
+                    <span>
+                        <Command.Input
+                            value={vm.inputVm.value}
+                            onValueChange={searchOption}
+                            placeholder={vm.inputVm.placeholder}
+                            size={props.size}
+                            variant={props.variant}
+                            disabled={props.disabled}
+                            invalid={props.invalid}
+                            startIcon={props.startIcon}
+                            endIcon={
+                                <AutoCompleteInputIcons
+                                    displayResetAction={vm.inputVm.displayResetAction}
+                                    isDisabled={props.disabled}
+                                    onResetValue={resetSelectedOption}
+                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.isOpen)}
+                                />
+                            }
+                            onBlur={() => setListOpenState(false)}
+                            onFocus={() => setListOpenState(true)}
+                        />
+                    </span>
+                </Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Content
+                        style={{ width: "var(--radix-popover-trigger-width)" }}
+                        onOpenAutoFocus={e => e.preventDefault()}
+                    >
+                        <AutoCompleteList
+                            options={vm.optionsListVm.options}
+                            onOptionSelect={handleSelectOption}
+                            isEmpty={vm.optionsListVm.isEmpty}
+                            isLoading={props.isLoading}
+                            loadingMessage={vm.optionsListVm.loadingMessage}
+                            emptyMessage={vm.optionsListVm.emptyMessage}
+                            optionRenderer={props.optionRenderer}
+                        />
+                    </Popover.Content>
+                </Popover.Portal>
+            </Command>
+        </Popover>
+    );
+};
+
+export { AutoCompletePrimitive, type AutoCompletePrimitiveProps };
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx
new file mode 100644
index 00000000000..5135538b3b8
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteInputIcons.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { ReactComponent as ChevronDown } from "@material-design-icons/svg/outlined/keyboard_arrow_down.svg";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+
+interface AutoCompleteInputIconsProps {
+    displayResetAction: boolean;
+    isDisabled?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onResetValue: () => void;
+}
+
+export const AutoCompleteInputIcons = (props: AutoCompleteInputIconsProps) => {
+    return (
+        <div className={"flex items-center gap-sm"}>
+            {props.displayResetAction && (
+                <IconButton
+                    size={"xs"}
+                    variant={"secondary"}
+                    icon={<Icon icon={<Close />} label={"Reset"} />}
+                    disabled={props.isDisabled}
+                    onClick={event => {
+                        event.stopPropagation();
+                        props.onResetValue();
+                    }}
+                />
+            )}
+            <Icon
+                size={"sm"}
+                icon={<ChevronDown />}
+                label={"Open list"}
+                onClick={event => {
+                    event.stopPropagation();
+                    props.onOpenChange(true);
+                }}
+            />
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx
new file mode 100644
index 00000000000..148c9ec40ac
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/AutoCompleteList.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { Command } from "~/Command";
+
+interface AutoCompleteListProps extends React.ComponentPropsWithoutRef<typeof Command.List> {
+    options: CommandOptionFormatted[];
+    emptyMessage?: React.ReactNode;
+    isEmpty?: boolean;
+    isLoading?: boolean;
+    loadingMessage?: React.ReactNode;
+    onOptionSelect: (value: string) => void;
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+}
+
+export const AutoCompleteList = ({
+    emptyMessage,
+    isEmpty,
+    isLoading,
+    loadingMessage,
+    onOptionSelect,
+    optionRenderer,
+    options,
+    ...props
+}: AutoCompleteListProps) => {
+    const renderOptions = React.useCallback(
+        (items: CommandOptionFormatted[]) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            const elements = [<Command.Item key={"dummy-element"} value="-" className="hidden" />];
+
+            return items.reduce((acc, item, currentIndex) => {
+                acc.push(
+                    <Command.Item
+                        key={`item-${item.value}-${currentIndex}`}
+                        value={item.value}
+                        keywords={[item.label]}
+                        disabled={item.disabled}
+                        selected={item.selected}
+                        onSelect={() => onOptionSelect(item.value)}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {optionRenderer && item.item
+                            ? optionRenderer.call(this, item.item, currentIndex)
+                            : item.label}
+                    </Command.Item>
+                );
+
+                // Conditionally render the separator if `separator` is true
+                if (item.separator) {
+                    acc.push(<Command.Separator key={`separator-${item.value ?? currentIndex}`} />);
+                }
+
+                return acc;
+            }, elements);
+        },
+        [onOptionSelect, optionRenderer, isEmpty]
+    );
+
+    return (
+        <Command.List {...props}>
+            {isLoading ? (
+                <Command.Loading>{loadingMessage}</Command.Loading>
+            ) : (
+                renderOptions(options)
+            )}
+            {!isLoading && <Command.Empty>{emptyMessage}</Command.Empty>}
+        </Command.List>
+    );
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/components/index.ts b/packages/admin-ui/src/AutoComplete/primitives/components/index.ts
new file mode 100644
index 00000000000..9b5759e336f
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AutoCompleteInputIcons";
+export * from "./AutoCompleteList";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOption.ts b/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOption.ts
new file mode 100644
index 00000000000..5bcc1c3a695
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOption.ts
@@ -0,0 +1,3 @@
+import { AutoCompleteOptionDto } from "./AutoCompleteOptionDto";
+
+export type AutoCompleteOption = AutoCompleteOptionDto | string;
diff --git a/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOptionDto.ts b/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOptionDto.ts
new file mode 100644
index 00000000000..0c3a6f24bda
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/domains/AutoCompleteOptionDto.ts
@@ -0,0 +1,3 @@
+import { CommandOptionDto } from "~/Command";
+
+export type AutoCompleteOptionDto = CommandOptionDto;
diff --git a/packages/admin-ui/src/AutoComplete/primitives/domains/ListCache.ts b/packages/admin-ui/src/AutoComplete/primitives/domains/ListCache.ts
new file mode 100644
index 00000000000..34d99cf2639
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/domains/ListCache.ts
@@ -0,0 +1,78 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+
+export class ListCache<T> implements IListCache<T> {
+    private state: T[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    getItems(predicate?: IListCachePredicate<T>): T[] {
+        if (predicate) {
+            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+        }
+
+        return [...this.state.map(item => toJS(item))];
+    }
+
+    getItem(predicate: IListCachePredicate<T>): T | undefined {
+        const item = this.state.find(item => predicate(item));
+
+        return item ? toJS(item) : undefined;
+    }
+
+    addItems(items: T[]) {
+        runInAction(() => {
+            this.state = [...this.state, ...items];
+        });
+    }
+
+    updateItems(updater: IListCacheItemUpdater<T>) {
+        runInAction(() => {
+            this.state = [...this.state.map(item => updater(item))];
+        });
+    }
+
+    removeItems(predicate: IListCachePredicate<T>) {
+        runInAction(() => {
+            this.state = this.state.filter(item => !predicate(item));
+        });
+    }
+}
diff --git a/packages/admin-ui/src/AutoComplete/primitives/domains/index.ts b/packages/admin-ui/src/AutoComplete/primitives/domains/index.ts
new file mode 100644
index 00000000000..5ac25dd186e
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/domains/index.ts
@@ -0,0 +1,3 @@
+export * from "./AutoCompleteOption";
+export * from "./AutoCompleteOptionDto";
+export * from "./ListCache";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts
new file mode 100644
index 00000000000..d921309e471
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteInputPresenter.ts
@@ -0,0 +1,56 @@
+import { makeAutoObservable } from "mobx";
+
+interface AutoCompleteInputPresenterParams {
+    value?: string;
+    placeholder?: string;
+    displayResetAction?: boolean;
+}
+
+interface IAutoCompleteInputPresenter {
+    vm: {
+        placeholder: string;
+        value: string;
+        displayResetAction: boolean;
+    };
+    init: (params: AutoCompleteInputPresenterParams) => void;
+    setValue: (query: string) => void;
+    resetValue: () => void;
+}
+
+class AutoCompleteInputPresenter implements IAutoCompleteInputPresenter {
+    private searchQuery?: string = undefined;
+    private placeholder?: string = undefined;
+    private displayResetAction?: boolean = true;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params?: AutoCompleteInputPresenterParams) {
+        this.searchQuery = params?.value;
+        this.placeholder = params?.placeholder;
+        this.displayResetAction = params?.displayResetAction ?? true;
+    }
+
+    get vm() {
+        return {
+            placeholder: this.placeholder || "Start typing or select",
+            value: this.searchQuery || "",
+            displayResetAction: Boolean(this.displayResetAction && !!this.searchQuery)
+        };
+    }
+
+    public setValue = (value: string) => {
+        this.searchQuery = value;
+    };
+
+    public resetValue = () => {
+        this.searchQuery = undefined;
+    };
+}
+
+export {
+    AutoCompleteInputPresenter,
+    type IAutoCompleteInputPresenter,
+    type AutoCompleteInputPresenterParams
+};
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts
new file mode 100644
index 00000000000..c55e50e6c07
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompleteListOptionsPresenter.ts
@@ -0,0 +1,85 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { ListCache } from "../domains";
+
+export interface IAutoCompleteListOptionsPresenterParams {
+    options?: CommandOption[];
+    emptyMessage?: any;
+    loadingMessage?: any;
+}
+
+export interface IAutoCompleteListOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        emptyMessage: string;
+        loadingMessage: string;
+        isOpen: boolean;
+        isEmpty: boolean;
+    };
+    init: (params: IAutoCompleteListOptionsPresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOption: () => void;
+}
+
+export class AutoCompleteListOptionsPresenter implements IAutoCompleteListOptionsPresenter {
+    private isOpen = false;
+    private emptyMessage = "No results.";
+    private loadingMessage = "Loading...";
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: IAutoCompleteListOptionsPresenterParams) {
+        this.options.clear();
+        params.options && this.options.addItems(params.options);
+        this.emptyMessage = params.emptyMessage || this.emptyMessage;
+        this.loadingMessage = params.loadingMessage || this.loadingMessage;
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            emptyMessage: this.emptyMessage,
+            loadingMessage: this.loadingMessage,
+            isOpen: this.isOpen,
+            isEmpty: !this.options.hasItems()
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.isOpen = open;
+    };
+
+    setSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = true;
+            }
+
+            return option;
+        });
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = false;
+            }
+
+            return option;
+        });
+    };
+
+    resetSelectedOption = () => {
+        this.options.updateItems(option => {
+            option.selected = false;
+            return option;
+        });
+    };
+}
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts
new file mode 100644
index 00000000000..48771a0c7ed
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.test.ts
@@ -0,0 +1,407 @@
+import { AutoCompletePresenter } from "./AutoCompletePresenter";
+import { AutoCompleteInputPresenter } from "./AutoCompleteInputPresenter";
+import { AutoCompleteListOptionsPresenter } from "./AutoCompleteListOptionsPresenter";
+
+describe("AutoCompletePresenter", () => {
+    const inputPresenter = new AutoCompleteInputPresenter();
+    const optionsListPresenter = new AutoCompleteListOptionsPresenter();
+    const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);
+    const onValueChange = jest.fn();
+
+    it("should return the compatible `vm.inputVm` based on params", () => {
+        // `placeholder`
+        {
+            presenter.init({ onValueChange, placeholder: "Custom placeholder" });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Custom placeholder");
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValueChange });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Start typing or select");
+            expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        }
+    });
+
+    it("should return the compatible `vm.optionsListVm` based on params", () => {
+        // with `options` as string
+        {
+            presenter.init({ onValueChange, options: ["Option 1", "Option 2"] });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        // with `options` as formatted options
+        {
+            presenter.init({
+                onValueChange,
+                options: [
+                    {
+                        value: "option-1",
+                        label: "Option 1"
+                    },
+                    {
+                        value: "option-2",
+                        label: "Option 2"
+                    },
+                    {
+                        value: "option-3",
+                        label: "Option 3",
+                        disabled: true
+                    },
+                    {
+                        value: "option-4",
+                        label: "Option 4",
+                        separator: true
+                    },
+                    {
+                        value: "option-5",
+                        label: "Option 5",
+                        item: {
+                            anyKey1: "custom-value",
+                            anyKey2: 2
+                        }
+                    }
+                ]
+            });
+
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "option-1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false, // `selected` is overwritten by the presenter
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-3",
+                    label: "Option 3",
+                    disabled: true,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-4",
+                    label: "Option 4",
+                    disabled: false,
+                    selected: false,
+                    separator: true,
+                    item: null
+                },
+                {
+                    value: "option-5",
+                    label: "Option 5",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: {
+                        anyKey1: "custom-value",
+                        anyKey2: 2
+                    }
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        // with `options` and `value`
+        {
+            presenter.init({ onValueChange, options: ["Option 1", "Option 2"], value: "Option 1" });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValueChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([]);
+            expect(presenter.vm.optionsListVm.emptyMessage).toEqual("No results.");
+            expect(presenter.vm.optionsListVm.loadingMessage).toEqual("Loading...");
+            expect(presenter.vm.optionsListVm.isOpen).toEqual(false);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(true);
+        }
+    });
+
+    it("should change the `options` state and call `onValueChange` callback when `setSelectedOption` is called", () => {
+        presenter.init({
+            onValueChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-2");
+        expect(onValueChange).toHaveBeenCalledWith("option-2");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should set the internal `inputValue` when `setInputValue` is called", () => {
+        presenter.init({
+            onValueChange
+        });
+
+        presenter.searchOption("value");
+        expect(presenter.vm.inputVm.value).toEqual("value");
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(true);
+    });
+
+    it("should set the option as `selected` when the presenter is initialized with a value", () => {
+        presenter.init({
+            onValueChange,
+            value: "option-1",
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("Option 1");
+    });
+
+    it("should reset the internal `options` state call `onValueChange` and `onValueReset` callbacks when `resetValue` is called", () => {
+        const onValueReset = jest.fn();
+        presenter.init({
+            onValueChange,
+            onValueReset,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("Option 1");
+
+        presenter.resetSelectedOption();
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+
+        expect(onValueChange).toHaveBeenCalledWith("");
+        expect(onValueReset).toHaveBeenCalled();
+    });
+
+    it("should change `optionsListVm` and call `onOpenChange` when `setListOpenState` is called", () => {
+        const onOpenChange = jest.fn();
+
+        // let's open it
+        presenter.init({ onValueChange, onOpenChange });
+        presenter.setListOpenState(true);
+        expect(presenter.vm.optionsListVm.isOpen).toBe(true);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+
+        // let's close it
+        presenter.setListOpenState(false);
+        expect(presenter.vm.optionsListVm.isOpen).toBe(false);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should not display the reset action if `displayResetAction` is set to `false` and option is selected", () => {
+        presenter.init({
+            onValueChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ],
+            displayResetAction: false
+        });
+
+        presenter.setSelectedOption("option-2");
+        expect(onValueChange).toHaveBeenCalledWith("option-2");
+        // `displayResetAction` is set to `false` and option is selected
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+});
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts
new file mode 100644
index 00000000000..e81c3dc4308
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/AutoCompletePresenter.ts
@@ -0,0 +1,116 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { IAutoCompleteInputPresenter } from "./AutoCompleteInputPresenter";
+import { IAutoCompleteListOptionsPresenter } from "./AutoCompleteListOptionsPresenter";
+import { AutoCompleteOption } from "../domains";
+
+interface AutoCompletePresenterParams {
+    displayResetAction?: boolean;
+    emptyMessage?: any;
+    loadingMessage?: any;
+    onOpenChange?: (open: boolean) => void;
+    onValueChange: (value: string) => void;
+    onValueReset?: () => void;
+    options?: AutoCompleteOption[];
+    placeholder?: string;
+    value?: string;
+}
+
+interface IAutoCompletePresenterParams {
+    vm: {
+        inputVm: IAutoCompleteInputPresenter["vm"];
+        optionsListVm: IAutoCompleteListOptionsPresenter["vm"];
+    };
+    init: (params: AutoCompletePresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    setSelectedOption: (value: string) => void;
+    searchOption: (value: string) => void;
+    resetSelectedOption: () => void;
+}
+
+class AutoCompletePresenter implements IAutoCompletePresenterParams {
+    private params?: AutoCompletePresenterParams = undefined;
+    private inputPresenter: IAutoCompleteInputPresenter;
+    private optionsListPresenter: IAutoCompleteListOptionsPresenter;
+
+    constructor(
+        inputPresenter: IAutoCompleteInputPresenter,
+        optionsListPresenter: IAutoCompleteListOptionsPresenter
+    ) {
+        this.inputPresenter = inputPresenter;
+        this.optionsListPresenter = optionsListPresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: AutoCompletePresenterParams) {
+        this.params = params;
+
+        const listOptions = this.getListOptions(params.options, params.value);
+        this.optionsListPresenter.init({
+            options: listOptions,
+            emptyMessage: params.emptyMessage,
+            loadingMessage: params.loadingMessage
+        });
+
+        const selected = this.getSelectedOption();
+        this.inputPresenter.init({
+            value: selected?.label ?? "",
+            placeholder: params.placeholder,
+            displayResetAction: params.displayResetAction
+        });
+    }
+
+    get vm() {
+        return {
+            inputVm: this.inputPresenter.vm,
+            optionsListVm: this.optionsListPresenter.vm
+        };
+    }
+
+    public setListOpenState = (open: boolean) => {
+        this.optionsListPresenter.setListOpenState(open);
+        this.params?.onOpenChange?.(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.inputPresenter.setValue(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.resetSelectedOption();
+        this.optionsListPresenter.setSelectedOption(value);
+        const option = this.getSelectedOption();
+
+        if (option) {
+            this.searchOption(option.label);
+        }
+
+        this.params?.onValueChange?.(value);
+    };
+
+    public resetSelectedOption = () => {
+        this.optionsListPresenter.resetSelectedOption();
+        this.inputPresenter.resetValue();
+
+        this.params?.onValueChange?.("");
+        this.params?.onValueReset?.();
+    };
+
+    private getListOptions(options: AutoCompleteOption[] = [], value?: string): CommandOption[] {
+        return options.map(option => {
+            const commandOption =
+                typeof option === "string"
+                    ? CommandOption.createFromString(option)
+                    : CommandOption.create(option);
+
+            commandOption.selected = commandOption.value === value;
+            return commandOption;
+        });
+    }
+
+    private getSelectedOption() {
+        return this.vm.optionsListVm.options.find(option => option.selected);
+    }
+}
+
+export { AutoCompletePresenter, type AutoCompletePresenterParams };
diff --git a/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts b/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts
new file mode 100644
index 00000000000..c8eca1661c4
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/presenters/index.ts
@@ -0,0 +1,3 @@
+export * from "./AutoCompletePresenter";
+export * from "./AutoCompleteInputPresenter";
+export * from "./AutoCompleteListOptionsPresenter";
diff --git a/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts b/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts
new file mode 100644
index 00000000000..2184fa90df7
--- /dev/null
+++ b/packages/admin-ui/src/AutoComplete/primitives/useAutoComplete.ts
@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { AutoCompletePrimitiveProps } from "./AutoCompletePrimitive";
+import {
+    AutoCompletePresenter,
+    AutoCompletePresenterParams,
+    AutoCompleteInputPresenter,
+    AutoCompleteListOptionsPresenter
+} from "./presenters";
+
+export const useAutoComplete = (props: AutoCompletePrimitiveProps) => {
+    const params: AutoCompletePresenterParams = useMemo(
+        () => ({
+            options: props.options,
+            value: props.value,
+            placeholder: props.placeholder,
+            emptyMessage: props.emptyMessage,
+            loadingMessage: props.loadingMessage,
+            onOpenChange: props.onOpenChange,
+            onValueChange: props.onValueChange,
+            onValueReset: props.onValueReset,
+            displayResetAction: props.displayResetAction
+        }),
+        [
+            props.options,
+            props.value,
+            props.placeholder,
+            props.emptyMessage,
+            props.loadingMessage,
+            props.onOpenChange,
+            props.onValueChange,
+            props.onValueReset,
+            props.displayResetAction
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        const inputPresenter = new AutoCompleteInputPresenter();
+        const optionsListPresenter = new AutoCompleteListOptionsPresenter();
+        const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);
+        presenter.init(params);
+        return presenter;
+    }, []);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params, presenter]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setSelectedOption: presenter.setSelectedOption,
+        searchOption: presenter.searchOption,
+        resetSelectedOption: presenter.resetSelectedOption,
+        setListOpenState: presenter.setListOpenState
+    };
+};
diff --git a/packages/admin-ui/src/Command/Command.tsx b/packages/admin-ui/src/Command/Command.tsx
new file mode 100644
index 00000000000..b04c1ee8bc0
--- /dev/null
+++ b/packages/admin-ui/src/Command/Command.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn, withStaticProps } from "~/utils";
+import { Empty, Group, Input, Item, List, Loading, Separator } from "./components";
+
+type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+
+const CommandBase = ({
+    className,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (
+    <CommandPrimitive
+        className={cn("flex h-full w-full flex-col outline-none", className)}
+        {...props}
+    />
+);
+
+const Command = withStaticProps(CommandBase, {
+    Empty,
+    Group,
+    Input,
+    Item,
+    List,
+    Loading,
+    Separator
+});
+
+export { Command, type CommandProps };
diff --git a/packages/admin-ui/src/Command/components/Empty.tsx b/packages/admin-ui/src/Command/components/Empty.tsx
new file mode 100644
index 00000000000..9c4ac8ae52b
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Empty.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+type EmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
+
+const Empty = (props: EmptyProps) => (
+    <CommandPrimitive.Empty
+        className="bg-neutral-base text-neutral-strong fill-neutral-xstrong rounded-sm p-sm mx-sm text-md outline-none"
+        {...props}
+    />
+);
+
+export { Empty, type EmptyProps };
diff --git a/packages/admin-ui/src/Command/components/Group.tsx b/packages/admin-ui/src/Command/components/Group.tsx
new file mode 100644
index 00000000000..a52245207f9
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Group.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "~/utils";
+
+type GroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
+
+const Group = ({ className, ...props }: GroupProps) => (
+    <CommandPrimitive.Group
+        className={cn(
+            "[&_[cmdk-group-heading]]:px-sm [&_[cmdk-group-heading]]:py-xs-plus [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-neutral-strong",
+            className
+        )}
+        {...props}
+    />
+);
+
+export { Group, type GroupProps };
diff --git a/packages/admin-ui/src/Command/components/Input.tsx b/packages/admin-ui/src/Command/components/Input.tsx
new file mode 100644
index 00000000000..343fd1646e5
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Input.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { InputPrimitive, InputPrimitiveProps } from "~/Input";
+
+type InputProps = Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, "size"> &
+    InputPrimitiveProps & {
+        inputElement?: React.ReactNode;
+    };
+
+const Input = ({ inputElement, size, ...props }: InputProps) => {
+    return (
+        <CommandPrimitive.Input asChild {...props}>
+            {inputElement ?? <InputPrimitive size={size} />}
+        </CommandPrimitive.Input>
+    );
+};
+
+export { Input, type InputProps };
diff --git a/packages/admin-ui/src/Command/components/Item.tsx b/packages/admin-ui/src/Command/components/Item.tsx
new file mode 100644
index 00000000000..1332752516e
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Item.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { ReactComponent as Check } from "@material-design-icons/svg/outlined/check.svg";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn, cva, type VariantProps } from "~/utils";
+
+const commandItemVariants = cva(
+    [
+        "flex items-center justify-between gap-sm-extra cursor-default select-none rounded-sm p-sm mx-sm text-md outline-none overflow-hidden",
+        "bg-neutral-base text-neutral-primary fill-neutral-xstrong",
+        "data-[disabled=true]:text-neutral-disabled data-[disabled=true]:cursor-not-allowed",
+        "data-[selected=true]:bg-neutral-dimmed"
+    ],
+    {
+        variants: {
+            selected: {
+                true: "font-semibold bg-neutral-dimmed"
+            }
+        }
+    }
+);
+
+interface ItemProps
+    extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>,
+        VariantProps<typeof commandItemVariants> {
+    selected?: boolean;
+}
+
+const Item = ({ className, children, selected, ...props }: ItemProps) => (
+    <CommandPrimitive.Item className={cn(commandItemVariants({ selected }), className)} {...props}>
+        <span className={"w-full overflow-hidden truncate whitespace-nowrap"}>{children}</span>
+        {selected ? <Check className="w-md h-md" /> : null}
+    </CommandPrimitive.Item>
+);
+
+export { Item, type ItemProps };
diff --git a/packages/admin-ui/src/Command/components/List.tsx b/packages/admin-ui/src/Command/components/List.tsx
new file mode 100644
index 00000000000..9a8ddb5440b
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/List.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "~/utils";
+
+type ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
+
+const List = ({ className, ...props }: ListProps) => {
+    return (
+        <CommandPrimitive.List
+            className={cn(
+                [
+                    "block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong"
+                ],
+                className
+            )}
+            {...props}
+        />
+    );
+};
+
+export { List, type ListProps };
diff --git a/packages/admin-ui/src/Command/components/Loading.tsx b/packages/admin-ui/src/Command/components/Loading.tsx
new file mode 100644
index 00000000000..68da2b52e4f
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Loading.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+type LoadingProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>;
+
+const Loading = (props: LoadingProps) => (
+    <CommandPrimitive.Loading
+        className="bg-neutral-base text-neutral-strong fill-neutral-xstrong rounded-sm p-sm mx-sm text-md outline-none"
+        {...props}
+    />
+);
+
+export { Loading, type LoadingProps };
diff --git a/packages/admin-ui/src/Command/components/Separator.tsx b/packages/admin-ui/src/Command/components/Separator.tsx
new file mode 100644
index 00000000000..a484f683dc7
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/Separator.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Separator as SeparatorPrimitive } from "~/Separator";
+
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
+
+const Separator = (props: SeparatorProps) => (
+    <CommandPrimitive.Separator {...props}>
+        <SeparatorPrimitive variant={"strong"} margin={"md"} />
+    </CommandPrimitive.Separator>
+);
+
+export { Separator, type SeparatorProps };
diff --git a/packages/admin-ui/src/Command/components/index.ts b/packages/admin-ui/src/Command/components/index.ts
new file mode 100644
index 00000000000..51e28ee4fa8
--- /dev/null
+++ b/packages/admin-ui/src/Command/components/index.ts
@@ -0,0 +1,7 @@
+export * from "./Empty";
+export * from "./Group";
+export * from "./Input";
+export * from "./Item";
+export * from "./List";
+export * from "./Loading";
+export * from "./Separator";
diff --git a/packages/admin-ui/src/Command/domain/CommandOption.ts b/packages/admin-ui/src/Command/domain/CommandOption.ts
new file mode 100644
index 00000000000..b8a396d8d58
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOption.ts
@@ -0,0 +1,80 @@
+import { CommandOptionDto } from "./CommandOptionDto";
+
+export class CommandOption {
+    private readonly _label: string;
+    private readonly _value: string;
+    private _disabled: boolean;
+    private readonly _separator: boolean;
+    private readonly _item: any | null;
+    private _selected: boolean;
+
+    protected constructor(data: {
+        label: string;
+        value: string;
+        disabled: boolean;
+        selected: boolean;
+        separator: boolean;
+        item: any | null;
+    }) {
+        this._label = data.label;
+        this._value = data.value;
+        this._disabled = data.disabled;
+        this._selected = data.selected;
+        this._separator = data.separator;
+        this._item = data.item;
+    }
+
+    static create(data: CommandOptionDto) {
+        return new CommandOption({
+            label: data.label,
+            value: data.value,
+            disabled: data.disabled ?? false,
+            selected: false,
+            separator: data.separator ?? false,
+            item: data.item ?? null
+        });
+    }
+
+    static createFromString(value: string) {
+        return new CommandOption({
+            label: value,
+            value: value,
+            disabled: false,
+            selected: false,
+            separator: false,
+            item: null
+        });
+    }
+
+    get label() {
+        return this._label;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(selected: boolean) {
+        this._disabled = selected;
+    }
+
+    get selected() {
+        return this._selected;
+    }
+
+    set selected(selected: boolean) {
+        this._selected = selected;
+    }
+
+    get separator() {
+        return this._separator;
+    }
+
+    get item() {
+        return this._item;
+    }
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionDto.ts b/packages/admin-ui/src/Command/domain/CommandOptionDto.ts
new file mode 100644
index 00000000000..2ee4888aa3d
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionDto.ts
@@ -0,0 +1,7 @@
+export interface CommandOptionDto {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    separator?: boolean;
+    item?: any;
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts b/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts
new file mode 100644
index 00000000000..b1a5a498888
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionFormatted.ts
@@ -0,0 +1,8 @@
+export interface CommandOptionFormatted {
+    label: string;
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+    separator: boolean;
+    item: any | null;
+}
diff --git a/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts b/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts
new file mode 100644
index 00000000000..44dae193163
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/CommandOptionFormatter.ts
@@ -0,0 +1,15 @@
+import { CommandOption } from "./CommandOption";
+import { CommandOptionFormatted } from "./CommandOptionFormatted";
+
+export class CommandOptionFormatter {
+    static format(option: CommandOption): CommandOptionFormatted {
+        return {
+            label: option.label,
+            value: option.value,
+            disabled: option.disabled,
+            selected: option.selected,
+            separator: option.separator,
+            item: option.item
+        };
+    }
+}
diff --git a/packages/admin-ui/src/Command/domain/index.ts b/packages/admin-ui/src/Command/domain/index.ts
new file mode 100644
index 00000000000..4f4e3acc23b
--- /dev/null
+++ b/packages/admin-ui/src/Command/domain/index.ts
@@ -0,0 +1,4 @@
+export * from "./CommandOption";
+export * from "./CommandOptionDto";
+export * from "./CommandOptionFormatted";
+export * from "./CommandOptionFormatter";
diff --git a/packages/admin-ui/src/Command/index.ts b/packages/admin-ui/src/Command/index.ts
new file mode 100644
index 00000000000..95f2837c8c4
--- /dev/null
+++ b/packages/admin-ui/src/Command/index.ts
@@ -0,0 +1,2 @@
+export * from "./Command";
+export * from "./domain";
diff --git a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx
index f9ea6d7f302..5602872b531 100644
--- a/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx
+++ b/packages/admin-ui/src/DropdownMenu/components/DropdownMenuSeparator.tsx
@@ -2,14 +2,9 @@ import * as React from "react";
 import { Separator, type SeparatorProps } from "~/Separator";
 import { makeDecoratable } from "~/utils";
 
-const DropdownMenuSeparatorBase = React.forwardRef<
-    React.ElementRef<typeof Separator>,
-    SeparatorProps
->((props, ref) => {
-    return <Separator ref={ref} variant={"strong"} margin={"md"} {...props} />;
-});
-
-DropdownMenuSeparatorBase.displayName = Separator.displayName;
+const DropdownMenuSeparatorBase = (props: SeparatorProps) => {
+    return <Separator variant={"strong"} margin={"md"} {...props} />;
+};
 
 export const DropdownMenuSeparator = makeDecoratable(
     "DropdownMenuSeparator",
diff --git a/packages/admin-ui/src/Input/InputPrimitive.tsx b/packages/admin-ui/src/Input/InputPrimitive.tsx
index ffd53398e6d..8764f040e58 100644
--- a/packages/admin-ui/src/Input/InputPrimitive.tsx
+++ b/packages/admin-ui/src/Input/InputPrimitive.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Icon as BaseIcon } from "~/Icon";
-import { cn, makeDecoratable } from "~/utils";
+import { cn } from "~/utils";
 
 /**
  * Icon
  */
-const iconVariants = cva("absolute transform top-1/2 -translate-y-1/2 fill-neutral-xstrong", {
+const inputIconVariants = cva("absolute fill-neutral-xstrong", {
     variants: {
         // Define dummy variants to be used in combination with `compoundVariants` below.
         inputSize: {
-            md: "",
-            lg: "",
-            xl: ""
+            md: "top-sm",
+            lg: "top-sm-extra",
+            xl: "top-md"
         },
         position: {
             start: "",
@@ -61,14 +61,15 @@ const iconVariants = cva("absolute transform top-1/2 -translate-y-1/2 fill-neutr
     ]
 });
 
-interface IconWrapperProps extends VariantProps<typeof iconVariants> {
+interface InputIconProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof inputIconVariants> {
     icon: React.ReactElement;
-    disabled?: boolean;
 }
 
-const Icon = ({ icon, disabled, position, inputSize }: IconWrapperProps) => {
+const InputIcon = ({ icon, disabled, position, inputSize, className }: InputIconProps) => {
     return (
-        <div className={cn(iconVariants({ position, disabled, inputSize }))}>
+        <div className={cn(inputIconVariants({ position, disabled, inputSize }), className)}>
             {React.cloneElement(icon, {
                 ...icon.props,
                 size: inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
@@ -79,12 +80,16 @@ const Icon = ({ icon, disabled, position, inputSize }: IconWrapperProps) => {
 
 /**
  * Input
+ *
+ * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants
+ * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
+ * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
  */
 const inputVariants = cva(
     [
-        "w-full border-sm text-md",
+        "w-full border-sm text-md peer",
         "focus-visible:outline-none",
-        "disabled:cursor-not-allowed",
+        "disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed",
         "file:bg-transparent file:border-none file:text-sm file:font-semibold"
     ],
     {
@@ -108,19 +113,25 @@ const inputVariants = cva(
                     "bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed",
                     "hover:border-neutral-strong",
                     "focus:border-neutral-black",
-                    "disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
+                    "data-[focused=true]:border-neutral-black",
+                    "disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled",
+                    "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-dimmed data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled"
                 ],
                 secondary: [
                     "bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed",
                     "hover:bg-neutral-dimmed",
                     "focus:bg-neutral-base focus:border-neutral-black",
-                    "disabled:bg-neutral-disabled disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
+                    "data-[focused=true]:bg-neutral-base data-[focused=true]:border-neutral-black",
+                    "disabled:bg-neutral-disabled disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled",
+                    "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled"
                 ],
                 ghost: [
                     "bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed",
                     "hover:bg-neutral-dimmed/95",
                     "focus:bg-neutral-base focus:border-neutral-black",
-                    "disabled:bg-transparent disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
+                    "data-[focused=true]:bg-neutral-base data-[focused=true]:border-neutral-black",
+                    "disabled:bg-transparent disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled",
+                    "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled"
                 ]
             },
             iconPosition: {
@@ -136,7 +147,9 @@ const inputVariants = cva(
                     "border-destructive-default",
                     "hover:border-destructive-default",
                     "focus:border-destructive-default",
-                    "disabled:border-destructive-default"
+                    "data-[focused=true]:border-destructive-default",
+                    "disabled:border-destructive-default",
+                    "data-[disabled=true]:border-destructive-default"
                 ]
             }
         },
@@ -186,7 +199,9 @@ const inputVariants = cva(
                     "border-destructive-subtle bg-destructive-subtle",
                     "hover:border-destructive-subtle",
                     "focus:border-destructive-subtle",
-                    "disabled:bg-destructive-subtle disabled:border-destructive-subtle"
+                    "data-[focused=true]:border-destructive-subtle",
+                    "disabled:bg-destructive-subtle disabled:border-destructive-subtle",
+                    "data-[disabled=true]:bg-destructive-subtle data-[disabled=true]:border-destructive-subtle"
                 ]
             }
         ],
@@ -203,6 +218,7 @@ interface InputPrimitiveProps
     startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
     endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;
     maxLength?: React.InputHTMLAttributes<HTMLInputElement>["size"];
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 
 const getIconPosition = (
@@ -221,39 +237,49 @@ const getIconPosition = (
     return;
 };
 
-const DecoratableInputPrimitive = React.forwardRef<HTMLInputElement, InputPrimitiveProps>(
-    (
-        { className, disabled, invalid, startIcon, maxLength, size, endIcon, variant, ...props },
-        ref
-    ) => {
-        const iconPosition = getIconPosition(startIcon, endIcon);
+const InputPrimitive = ({
+    className,
+    disabled,
+    invalid,
+    startIcon,
+    maxLength,
+    size,
+    endIcon,
+    variant,
+    inputRef,
+    ...props
+}: InputPrimitiveProps) => {
+    const iconPosition = getIconPosition(startIcon, endIcon);
 
-        return (
-            <div className={cn("relative flex items-center w-full", className)}>
-                {startIcon && (
-                    <Icon
-                        disabled={disabled}
-                        icon={startIcon}
-                        inputSize={size}
-                        position={"start"}
-                    />
-                )}
-                <input
-                    className={cn(inputVariants({ variant, size, iconPosition, invalid }))}
-                    ref={ref}
+    return (
+        <div className={cn("relative flex items-center w-full", className)}>
+            {startIcon && (
+                <InputIcon
                     disabled={disabled}
-                    size={maxLength}
-                    {...props}
+                    icon={startIcon}
+                    inputSize={size}
+                    position={"start"}
                 />
-                {endIcon && (
-                    <Icon disabled={disabled} icon={endIcon} inputSize={size} position={"end"} />
-                )}
-            </div>
-        );
-    }
-);
-DecoratableInputPrimitive.displayName = "InputPrimitive";
-
-const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
+            )}
+            <input
+                ref={inputRef}
+                className={cn(inputVariants({ variant, size, iconPosition, invalid }))}
+                disabled={disabled}
+                size={maxLength}
+                {...props}
+            />
+            {endIcon && (
+                <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={"end"} />
+            )}
+        </div>
+    );
+};
 
-export { InputPrimitive, type InputPrimitiveProps };
+export {
+    InputIcon,
+    InputPrimitive,
+    getIconPosition,
+    inputVariants,
+    type InputIconProps,
+    type InputPrimitiveProps
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx
new file mode 100644
index 00000000000..6c9b092809d
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.stories.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiAutoComplete } from "./MultiAutoComplete";
+
+const meta: Meta<typeof MultiAutoComplete> = {
+    title: "Components/Form/Multi AutoComplete",
+    component: MultiAutoComplete,
+    tags: ["autodocs"],
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return <MultiAutoComplete {...args} values={values} onValuesChange={setValues} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiAutoComplete>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx
new file mode 100644
index 00000000000..8deec0d44ba
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { MultiAutoCompletePrimitive, MultiAutoCompletePrimitiveProps } from "./primitives";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
+
+const DecoratableMultiAutoComplete = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: MultiAutoCompleteProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} />
+            <MultiAutoCompletePrimitive {...props} disabled={disabled} label={label} />
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <FormComponentNote text={note} />
+        </div>
+    );
+};
+
+const MultiAutoComplete = makeDecoratable("MultiAutoComplete", DecoratableMultiAutoComplete);
+
+export { MultiAutoComplete };
diff --git a/packages/admin-ui/src/MultiAutoComplete/index.ts b/packages/admin-ui/src/MultiAutoComplete/index.ts
new file mode 100644
index 00000000000..311a209cede
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/index.ts
@@ -0,0 +1 @@
+export * from "./MultiAutoComplete";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx
new file mode 100644
index 00000000000..abe7eaaf2b4
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx
@@ -0,0 +1,503 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+import { MultiAutoCompletePrimitive } from "./MultiAutoCompletePrimitive";
+import { Button } from "~/Button";
+import { Icon } from "~/Icon";
+import { Tag } from "~/Tag";
+
+const meta: Meta<typeof MultiAutoCompletePrimitive> = {
+    title: "Components/Form Primitives/Multi Autocomplete",
+    component: MultiAutoCompletePrimitive,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        onValuesChange: { action: "onValuesChange" },
+        onOpenChange: { action: "onOpenChange" },
+        disabled: {
+            control: {
+                type: "boolean"
+            }
+        }
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <div className={"w-full"}>
+                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />
+                <div className={"mt-4 text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiAutoCompletePrimitive>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const MediumSize: Story = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+
+export const LargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+
+export const ExtraLargeSize: Story = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+
+export const WithStartIcon: Story = {
+    args: {
+        ...Default.args,
+        startIcon: <Icon label={"Search"} icon={<SearchIcon />} />
+    }
+};
+
+export const WithoutResetAction: Story = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+
+export const PrimaryVariant: Story = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+
+export const PrimaryVariantDisabled: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+
+export const PrimaryVariantInvalid: Story = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+
+export const SecondaryVariant: Story = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const SecondaryVariantDisabled: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+
+export const SecondaryVariantInvalid: Story = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+
+export const GhostVariant: Story = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const GhostVariantDisabled: Story = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+
+export const GhostVariantInvalid: Story = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+
+export const WithPredefinedValue: Story = {
+    args: {
+        ...Default.args,
+        values: ["Eastern Standard Time (EST)"]
+    }
+};
+
+export const WithCustomPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+
+export const WithCustomEmptyMessage: Story = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
+};
+
+export const WithAllowFreeInput: Story = {
+    args: {
+        ...Default.args,
+        allowFreeInput: true
+    }
+};
+
+export const WithUniqueValues: Story = {
+    args: {
+        ...Default.args,
+        uniqueValues: true,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" }
+        ]
+    }
+};
+
+export const WithFormattedOptions: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithCustomOptionRenderer: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est",
+                item: {
+                    name: "Eastern Standard Time (EST)",
+                    time_difference: "-5:00",
+                    flag: "🇺🇸",
+                    value: "est"
+                }
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst",
+                item: {
+                    name: "Central Standard Time (CST)",
+                    time_difference: "-6:00",
+                    flag: "🇺🇸",
+                    value: "cst"
+                }
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst",
+                item: {
+                    name: "Pacific Standard Time (PST)",
+                    time_difference: "-8:00",
+                    flag: "🇺🇸",
+                    value: "pst"
+                }
+            },
+            {
+                label: "Greenwich Mean Time (GMT)",
+                value: "gmt",
+                item: {
+                    name: "Greenwich Mean Time (GMT)",
+                    time_difference: "±0:00",
+                    flag: "🇬🇧",
+                    value: "gmt"
+                }
+            },
+            {
+                label: "Central European Time (CET)",
+                value: "cet",
+                item: {
+                    name: "Central European Time (CET)",
+                    time_difference: "+1:00",
+                    flag: "🇪🇺",
+                    value: "cet"
+                }
+            },
+            {
+                label: "Central Africa Time (CAT)",
+                value: "cat",
+                item: {
+                    name: "Central Africa Time (CAT)",
+                    time_difference: "+2:00",
+                    flag: "🇿🇦",
+                    value: "cat"
+                }
+            },
+            {
+                label: "India Standard Time (IST)",
+                value: "ist",
+                item: {
+                    name: "India Standard Time (IST)",
+                    time_difference: "+5:30",
+                    flag: "🇮🇳",
+                    value: "ist"
+                }
+            },
+            {
+                label: "China Standard Time (CST)",
+                value: "cst_china",
+                item: {
+                    name: "China Standard Time (CST)",
+                    time_difference: "+8:00",
+                    flag: "🇨🇳",
+                    value: "cst_china"
+                }
+            },
+            {
+                label: "Japan Standard Time (JST)",
+                value: "jst",
+                item: {
+                    name: "Japan Standard Time (JST)",
+                    time_difference: "+9:00",
+                    flag: "🇯🇵",
+                    value: "jst"
+                }
+            },
+            {
+                label: "Australian Western Standard Time (AWST)",
+                value: "awst",
+                item: {
+                    name: "Australian Western Standard Time (AWST)",
+                    time_difference: "+8:00",
+                    flag: "🇦🇺",
+                    value: "awst"
+                }
+            },
+            {
+                label: "New Zealand Standard Time (NZST)",
+                value: "nzst",
+                item: {
+                    name: "New Zealand Standard Time (NZST)",
+                    time_difference: "+12:00",
+                    flag: "🇳🇿",
+                    value: "nzst"
+                }
+            },
+            {
+                label: "Fiji Time (FJT)",
+                value: "fjt",
+                item: {
+                    name: "Fiji Time (FJT)",
+                    time_difference: "+12:00",
+                    flag: "🇫🇯",
+                    value: "fjt"
+                }
+            },
+            {
+                label: "Argentina Time (ART)",
+                value: "art",
+                item: {
+                    name: "Argentina Time (ART)",
+                    time_difference: "-3:00",
+                    flag: "🇦🇷",
+                    value: "art"
+                }
+            },
+            {
+                label: "Bolivia Time (BOT)",
+                value: "bot",
+                item: {
+                    name: "Bolivia Time (BOT)",
+                    time_difference: "-4:00",
+                    flag: "🇧🇴",
+                    value: "bot"
+                }
+            },
+            {
+                label: "Brasilia Time (BRT)",
+                value: "brt",
+                item: {
+                    name: "Brasilia Time (BRT)",
+                    time_difference: "-3:00",
+                    flag: "🇧🇷",
+                    value: "brt"
+                }
+            }
+        ],
+        optionRenderer: item => {
+            return (
+                <div className={"w-full flex justify-between align-middle"}>
+                    <div>
+                        <span className={"mr-sm"}>{item.flag}</span>
+                        {item.name}
+                    </div>
+                    <div className={"text-sm"}>{item.time_difference}</div>
+                </div>
+            );
+        }
+    }
+};
+
+export const WithCustomSelectedOptionRenderer: Story = {
+    args: {
+        ...WithCustomOptionRenderer.args
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        const selectedOptionRenderer = (item: any) => {
+            return (
+                <Tag
+                    variant={"neutral-base"}
+                    content={
+                        <>
+                            {item.flag} {item.name}
+                        </>
+                    }
+                    onDismiss={() => setValues(values.filter(value => value !== item.value))}
+                />
+            );
+        };
+        return (
+            <div className={"w-full"}>
+                <MultiAutoCompletePrimitive
+                    {...args}
+                    values={values}
+                    onValuesChange={setValues}
+                    selectedOptionRenderer={selectedOptionRenderer}
+                />
+                <div className={"mt-4 text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
+
+export const WithSeparators: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst", separator: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat", separator: true },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst", separator: true },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt", separator: true },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithDisabledOptions: Story = {
+    args: {
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est", disabled: true },
+            { label: "Central Standard Time (CST)", value: "cst", disabled: true },
+            { label: "Pacific Standard Time (PST)", value: "pst", disabled: true },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    }
+};
+
+export const WithExternalValueControl: Story = {
+    args: {
+        ...Default.args,
+        options: [
+            { label: "Eastern Standard Time (EST)", value: "est" },
+            { label: "Central Standard Time (CST)", value: "cst" },
+            { label: "Pacific Standard Time (PST)", value: "pst" },
+            { label: "Greenwich Mean Time (GMT)", value: "gmt" },
+            { label: "Central European Time (CET)", value: "cet" },
+            { label: "Central Africa Time (CAT)", value: "cat" },
+            { label: "India Standard Time (IST)", value: "ist" },
+            { label: "China Standard Time (CST)", value: "cst_china" },
+            { label: "Japan Standard Time (JST)", value: "jst" },
+            { label: "Australian Western Standard Time (AWST)", value: "awst" },
+            { label: "New Zealand Standard Time (NZST)", value: "nzst" },
+            { label: "Fiji Time (FJT)", value: "fjt" },
+            { label: "Argentina Time (ART)", value: "art" },
+            { label: "Bolivia Time (BOT)", value: "bot" },
+            { label: "Brasilia Time (BRT)", value: "brt" }
+        ]
+    },
+    render: args => {
+        const [values, setValues] = useState(args.values);
+        return (
+            <div className={"w-full"}>
+                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />
+                <div className={"mt-4 text-center"}>
+                    <Button text={"Reset"} onClick={() => setValues(args.values)} />
+                </div>
+                <div className={"mt-4 text-center"}>Current selected values: {values}</div>
+            </div>
+        );
+    }
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx
new file mode 100644
index 00000000000..cd5f80bb2f8
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx
@@ -0,0 +1,175 @@
+import React, { KeyboardEvent } from "react";
+import { Command } from "~/Command";
+import { Popover } from "~/Popover";
+import { InputPrimitiveProps } from "~/Input";
+import { useMultiAutoComplete } from "./useMultiAutoComplete";
+import {
+    MultiAutoCompleteInput,
+    MultiAutoCompleteInputIcons,
+    MultiAutoCompleteList
+} from "./components";
+import { MultiAutoCompleteOption } from "./domains";
+
+type MultiAutoCompletePrimitiveProps = Omit<
+    InputPrimitiveProps,
+    "endIcon" | "value" | "onValueChange"
+> & {
+    /**
+     * Accessible label for the command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Allows free input of values not present in the options.
+     */
+    allowFreeInput?: boolean;
+    /**
+     * Message to display when there are no options.
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Indicates if the autocomplete is loading options.
+     */
+    isLoading?: boolean;
+    /**
+     * Message to display while loading options.
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when the values change.
+     */
+    onValuesChange: (values: string[]) => void;
+    /**
+     * Callback triggered to reset the values.
+     */
+    onValuesReset?: () => void;
+    /**
+     * Custom renderer for the options.
+     */
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * List of options for the autocomplete.
+     */
+    options?: MultiAutoCompleteOption[];
+    /**
+     * Custom renderer for the selected options.
+     */
+    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Ensures that each value is unique.
+     */
+    uniqueValues?: boolean;
+    /**
+     * Optional selected items.
+     */
+    values: string[];
+    /**
+     * Indicates if the reset action should be displayed.
+     */
+    displayResetAction?: boolean;
+};
+
+const MultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {
+    const {
+        vm,
+        setListOpenState,
+        setSelectedOption,
+        searchOption,
+        removeSelectedOption,
+        resetSelectedOptions,
+        createOption
+    } = useMultiAutoComplete(props);
+
+    const handleKeyDown = React.useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (!vm.optionsListVm.isOpen) {
+                setListOpenState(true);
+            }
+
+            if (event.key.toLowerCase() === "escape") {
+                setListOpenState(false);
+            }
+        },
+        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.isOpen]
+    );
+
+    const handleSelectOption = React.useCallback(
+        (value: string) => {
+            setSelectedOption(value);
+            setListOpenState(false);
+        },
+        [setSelectedOption, setListOpenState]
+    );
+
+    const handleCreateOption = React.useCallback(
+        (value: string) => {
+            createOption(value);
+            setListOpenState(false);
+        },
+        [createOption, setListOpenState]
+    );
+
+    return (
+        <Popover open={vm.optionsListVm.isOpen} onOpenChange={() => setListOpenState(true)}>
+            <Command label={props.label} onKeyDown={handleKeyDown}>
+                <Popover.Trigger asChild>
+                    <span>
+                        <MultiAutoCompleteInput
+                            value={vm.inputVm.value}
+                            placeholder={vm.inputVm.placeholder}
+                            changeValue={searchOption}
+                            closeList={() => setListOpenState(false)}
+                            openList={() => setListOpenState(true)}
+                            variant={props.variant}
+                            size={props.size}
+                            invalid={props.invalid}
+                            removeSelectedOption={removeSelectedOption}
+                            selectedOptionRenderer={props.selectedOptionRenderer}
+                            selectedOptions={vm.selectedOptionsVm.options}
+                            disabled={props.disabled}
+                            startIcon={props.startIcon}
+                            endIcon={
+                                <MultiAutoCompleteInputIcons
+                                    displayResetAction={
+                                        !vm.selectedOptionsVm.isEmpty &&
+                                        vm.inputVm.displayResetAction
+                                    }
+                                    isDisabled={props.disabled}
+                                    onResetValue={resetSelectedOptions}
+                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.isOpen)}
+                                />
+                            }
+                        />
+                    </span>
+                </Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Content
+                        style={{ width: "var(--radix-popover-trigger-width)" }}
+                        onOpenAutoFocus={e => e.preventDefault()}
+                    >
+                        <MultiAutoCompleteList
+                            emptyMessage={vm.optionsListVm.emptyMessage}
+                            isEmpty={vm.optionsListVm.isEmpty}
+                            isLoading={props.isLoading}
+                            loadingMessage={vm.optionsListVm.loadingMessage}
+                            onOptionCreate={handleCreateOption}
+                            onOptionSelect={handleSelectOption}
+                            optionRenderer={props.optionRenderer}
+                            options={vm.optionsListVm.options}
+                            temporaryOption={vm.temporaryOptionVm.option}
+                        />
+                    </Popover.Content>
+                </Popover.Portal>
+            </Command>
+        </Popover>
+    );
+};
+
+export { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx
new file mode 100644
index 00000000000..5733ab8d82d
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { getIconPosition, InputIcon, InputPrimitiveProps, inputVariants } from "~/Input";
+import { Command, CommandOptionFormatted } from "~/Command";
+import { Tag } from "~/Tag";
+import { cn, cva, VariantProps } from "~/utils";
+
+const multiAutoCompleteInputVariants = cva("relative placeholder:text-neutral-dimmed", {
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled"
+        }
+    }
+});
+
+type MultiAutoCompleteInputProps = VariantProps<typeof multiAutoCompleteInputVariants> &
+    InputPrimitiveProps & {
+        changeValue: (value: string) => void;
+        closeList: () => void;
+        openList: () => void;
+        placeholder: string;
+        removeSelectedOption: (value: string) => void;
+        selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+        selectedOptions: CommandOptionFormatted[];
+        value: string;
+    };
+
+const MultiAutoCompleteInput = ({
+    changeValue,
+    closeList,
+    disabled,
+    endIcon,
+    invalid,
+    openList,
+    placeholder,
+    removeSelectedOption,
+    selectedOptionRenderer,
+    selectedOptions,
+    size,
+    startIcon,
+    value,
+    variant,
+    className,
+    ...props
+}: MultiAutoCompleteInputProps) => {
+    const [focused, setFocused] = React.useState<boolean>(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const iconPosition = getIconPosition(startIcon, endIcon);
+
+    const renderSelectedOptions = React.useCallback(
+        (options: CommandOptionFormatted[]) => {
+            return options.map((option, index) => {
+                if (selectedOptionRenderer) {
+                    if (!option.item) {
+                        return null;
+                    }
+                    return selectedOptionRenderer.call(this, option.item, index);
+                }
+
+                return (
+                    <Tag
+                        key={`tag-${option.value}-${index}`}
+                        variant={"neutral-light"}
+                        content={option.label}
+                        onDismiss={() => removeSelectedOption(option.value)}
+                    />
+                );
+            });
+        },
+        [selectedOptionRenderer, removeSelectedOption]
+    );
+
+    return (
+        <div
+            {...props}
+            className={cn(
+                inputVariants({
+                    variant,
+                    size,
+                    iconPosition,
+                    invalid
+                }),
+                multiAutoCompleteInputVariants({ disabled }),
+                className
+            )}
+            aria-disabled={disabled}
+            onClick={() => {
+                if (disabled) {
+                    return;
+                }
+                inputRef?.current?.focus();
+                setFocused(true);
+            }}
+            data-disabled={disabled}
+            data-focused={focused}
+        >
+            {startIcon && (
+                <InputIcon
+                    disabled={disabled}
+                    icon={startIcon}
+                    inputSize={size}
+                    position={"start"}
+                />
+            )}
+            <div className="relative flex flex-wrap gap-xs">
+                {renderSelectedOptions(selectedOptions)}
+                <Command.Input
+                    className={"flex-1 bg-transparent border-none outline-none"}
+                    value={value}
+                    onValueChange={changeValue}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onBlur={() => {
+                        setFocused(false);
+                        closeList();
+                    }}
+                    onFocus={() => {
+                        setFocused(true);
+                        openList();
+                    }}
+                    inputElement={
+                        <input
+                            type="text"
+                            ref={inputRef}
+                            className={cn(multiAutoCompleteInputVariants({ disabled }))}
+                        />
+                    }
+                />
+            </div>
+            {endIcon && (
+                <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={"end"} />
+            )}
+        </div>
+    );
+};
+
+export { MultiAutoCompleteInput, type MultiAutoCompleteInputProps };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx
new file mode 100644
index 00000000000..e64f5ccc67f
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteInputIcons.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg";
+import { ReactComponent as ChevronDown } from "@material-design-icons/svg/outlined/keyboard_arrow_down.svg";
+import { IconButton } from "~/Button";
+import { Icon } from "~/Icon";
+
+interface MultiAutoCompleteInputIconsProps {
+    displayResetAction: boolean;
+    isDisabled?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onResetValue: () => void;
+}
+
+export const MultiAutoCompleteInputIcons = (props: MultiAutoCompleteInputIconsProps) => {
+    return (
+        <div className={"flex items-center gap-sm"}>
+            {props.displayResetAction && (
+                <IconButton
+                    size={"xs"}
+                    variant={"secondary"}
+                    icon={<Icon icon={<Close />} label={"Reset"} />}
+                    disabled={props.isDisabled}
+                    onClick={event => {
+                        event.stopPropagation();
+                        props.onResetValue();
+                    }}
+                />
+            )}
+            <Icon
+                size={"sm"}
+                icon={<ChevronDown />}
+                label={"Open list"}
+                onClick={event => {
+                    event.stopPropagation();
+                    props.onOpenChange(true);
+                }}
+            />
+        </div>
+    );
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx
new file mode 100644
index 00000000000..13a01a39ba4
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/MultiAutoCompleteList.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { Command } from "~/Command";
+
+interface MultiAutoCompleteListProps extends React.ComponentPropsWithoutRef<typeof Command.List> {
+    emptyMessage?: React.ReactNode;
+    isEmpty?: boolean;
+    isLoading?: boolean;
+    loadingMessage?: React.ReactNode;
+    onOptionCreate?: (value: string) => void;
+    onOptionSelect: (value: string) => void;
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    options: CommandOptionFormatted[];
+    temporaryOption?: CommandOptionFormatted;
+}
+
+export const MultiAutoCompleteList = ({
+    emptyMessage,
+    isEmpty,
+    isLoading,
+    loadingMessage,
+    onOptionCreate,
+    onOptionSelect,
+    optionRenderer,
+    options,
+    temporaryOption,
+    ...props
+}: MultiAutoCompleteListProps) => {
+    const renderOptions = React.useCallback(
+        (items: CommandOptionFormatted[]) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            const elements = [<Command.Item key={"dummy-element"} value="-" className="hidden" />];
+
+            const renderedItems = items.reduce((acc, item, currentIndex) => {
+                acc.push(
+                    <Command.Item
+                        key={`item-${item.value}-${currentIndex}`}
+                        value={item.value}
+                        keywords={[item.label]}
+                        disabled={item.disabled}
+                        selected={item.selected}
+                        onSelect={() => onOptionSelect(item.value)}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {optionRenderer && item.item
+                            ? optionRenderer.call(this, item.item, currentIndex)
+                            : item.label}
+                    </Command.Item>
+                );
+
+                // Conditionally render the separator if `separator` is true
+                if (item.separator) {
+                    acc.push(<Command.Separator key={`separator-${item.value ?? currentIndex}`} />);
+                }
+
+                return acc;
+            }, elements);
+
+            if (temporaryOption?.value) {
+                renderedItems.push(
+                    <Command.Item
+                        key={`temporary-${temporaryOption.value}`}
+                        value={temporaryOption.value}
+                        keywords={[temporaryOption.label]}
+                        disabled={temporaryOption.disabled}
+                        selected={temporaryOption.selected}
+                        onSelect={() => {
+                            onOptionCreate && onOptionCreate(temporaryOption.value);
+                        }}
+                        onMouseDown={event => event.preventDefault()}
+                    >
+                        {`Add "${temporaryOption.label}" as new option`}
+                    </Command.Item>
+                );
+            }
+
+            return renderedItems;
+        },
+        [onOptionSelect, temporaryOption, onOptionCreate, isEmpty, optionRenderer]
+    );
+
+    return (
+        <Command.List {...props}>
+            {isLoading ? (
+                <Command.Loading>{loadingMessage}</Command.Loading>
+            ) : (
+                renderOptions(options)
+            )}
+            {!isLoading && <Command.Empty>{emptyMessage}</Command.Empty>}
+        </Command.List>
+    );
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts
new file mode 100644
index 00000000000..dbcd82369d5
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./MultiAutoCompleteInput";
+export * from "./MultiAutoCompleteInputIcons";
+export * from "./MultiAutoCompleteList";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/domains/ListCache.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/ListCache.ts
new file mode 100644
index 00000000000..34d99cf2639
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/ListCache.ts
@@ -0,0 +1,78 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IListCachePredicate<T> {
+    (item: T): boolean;
+}
+
+export interface IListCacheItemUpdater<T> {
+    (item: T): T;
+}
+
+export interface IListCache<T> {
+    count(): number;
+    clear(): void;
+    hasItems(): boolean;
+    getItems(predicate?: IListCachePredicate<T>): T[];
+    getItem(predicate: IListCachePredicate<T>): T | undefined;
+    addItems(items: T[]): void;
+    updateItems(updater: IListCacheItemUpdater<T>): void;
+    removeItems(predicate: IListCachePredicate<T>): void;
+}
+
+export class ListCache<T> implements IListCache<T> {
+    private state: T[];
+
+    constructor() {
+        this.state = [];
+
+        makeAutoObservable(this);
+    }
+
+    count() {
+        return this.state.length;
+    }
+
+    clear() {
+        runInAction(() => {
+            this.state = [];
+        });
+    }
+
+    hasItems() {
+        return this.state.length > 0;
+    }
+
+    getItems(predicate?: IListCachePredicate<T>): T[] {
+        if (predicate) {
+            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
+        }
+
+        return [...this.state.map(item => toJS(item))];
+    }
+
+    getItem(predicate: IListCachePredicate<T>): T | undefined {
+        const item = this.state.find(item => predicate(item));
+
+        return item ? toJS(item) : undefined;
+    }
+
+    addItems(items: T[]) {
+        runInAction(() => {
+            this.state = [...this.state, ...items];
+        });
+    }
+
+    updateItems(updater: IListCacheItemUpdater<T>) {
+        runInAction(() => {
+            this.state = [...this.state.map(item => updater(item))];
+        });
+    }
+
+    removeItems(predicate: IListCachePredicate<T>) {
+        runInAction(() => {
+            this.state = this.state.filter(item => !predicate(item));
+        });
+    }
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOption.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOption.ts
new file mode 100644
index 00000000000..3cf3c829c36
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOption.ts
@@ -0,0 +1,3 @@
+import { MultiAutoCompleteOptionDto } from "./MultiAutoCompleteOptionDto";
+
+export type MultiAutoCompleteOption = MultiAutoCompleteOptionDto | string;
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOptionDto.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOptionDto.ts
new file mode 100644
index 00000000000..175eba24bd6
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/MultiAutoCompleteOptionDto.ts
@@ -0,0 +1,3 @@
+import { CommandOptionDto } from "~/Command";
+
+export type MultiAutoCompleteOptionDto = CommandOptionDto;
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/domains/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/index.ts
new file mode 100644
index 00000000000..2a8a1c6d902
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/domains/index.ts
@@ -0,0 +1,3 @@
+export * from "./ListCache";
+export * from "./MultiAutoCompleteOption";
+export * from "./MultiAutoCompleteOptionDto";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts
new file mode 100644
index 00000000000..726b0979c3e
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/index.ts
@@ -0,0 +1 @@
+export * from "./MultiAutoCompletePrimitive";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts
new file mode 100644
index 00000000000..281a0c632ff
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteInputPresenter.ts
@@ -0,0 +1,48 @@
+import { makeAutoObservable } from "mobx";
+
+export interface MultiAutoCompleteInputPresenterParams {
+    placeholder?: string;
+    displayResetAction?: boolean;
+}
+
+export interface IMultiAutoCompleteInputPresenter {
+    vm: {
+        placeholder: string;
+        value: string;
+        displayResetAction: boolean;
+    };
+    init: (params: MultiAutoCompleteInputPresenterParams) => void;
+    setValue: (query: string) => void;
+    resetValue: () => void;
+}
+
+export class MultiAutoCompleteInputPresenter implements IMultiAutoCompleteInputPresenter {
+    private searchQuery?: string = undefined;
+    private placeholder?: string = undefined;
+    private displayResetAction = true;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params?: MultiAutoCompleteInputPresenterParams) {
+        this.placeholder = params?.placeholder;
+        this.displayResetAction = params?.displayResetAction ?? true;
+    }
+
+    get vm() {
+        return {
+            placeholder: this.placeholder || "Start typing or select",
+            value: this.searchQuery || "",
+            displayResetAction: this.displayResetAction
+        };
+    }
+
+    public setValue = (value: string) => {
+        this.searchQuery = value;
+    };
+
+    public resetValue = () => {
+        this.searchQuery = undefined;
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts
new file mode 100644
index 00000000000..adb2bdca864
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.ts
@@ -0,0 +1,92 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { ListCache } from "../domains";
+
+export interface IMultiAutoCompleteListOptionsPresenterParams {
+    options?: CommandOption[];
+    emptyMessage?: any;
+    loadingMessage?: any;
+}
+
+export interface IMultiAutoCompleteListOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        emptyMessage: string;
+        loadingMessage: string;
+        isOpen: boolean;
+        isEmpty: boolean;
+    };
+    init: (params: IMultiAutoCompleteListOptionsPresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    addOption: (option: CommandOption) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOptions: () => void;
+}
+
+export class MultiAutoCompleteListOptionsPresenter
+    implements IMultiAutoCompleteListOptionsPresenter
+{
+    private isOpen = false;
+    private emptyMessage = "No results.";
+    private loadingMessage = "Loading...";
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: IMultiAutoCompleteListOptionsPresenterParams) {
+        this.options.clear();
+        params.options && this.options.addItems(params.options);
+        this.emptyMessage = params.emptyMessage || this.emptyMessage;
+        this.loadingMessage = params.loadingMessage || this.loadingMessage;
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            emptyMessage: this.emptyMessage,
+            loadingMessage: this.loadingMessage,
+            isOpen: this.isOpen,
+            isEmpty: !this.options.hasItems()
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.isOpen = open;
+    };
+
+    setSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = true;
+            }
+
+            return option;
+        });
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.options.updateItems(option => {
+            if (option.value === value) {
+                option.selected = false;
+            }
+
+            return option;
+        });
+    };
+
+    resetSelectedOptions = () => {
+        this.options.updateItems(option => {
+            option.selected = false;
+            return option;
+        });
+    };
+
+    addOption = (option: CommandOption) => {
+        this.options.addItems([option]);
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts
new file mode 100644
index 00000000000..1cd2cf241bc
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.ts
@@ -0,0 +1,47 @@
+import { CommandOption } from "~/Command/domain/CommandOption";
+import {
+    IMultiAutoCompleteListOptionsPresenter,
+    IMultiAutoCompleteListOptionsPresenterParams
+} from "./MultiAutoCompleteListOptionsPresenter";
+
+export class MultiAutoCompleteListOptionsPresenterWithUniqueValues
+    implements IMultiAutoCompleteListOptionsPresenter
+{
+    private decoretee: IMultiAutoCompleteListOptionsPresenter;
+
+    constructor(decoretee: IMultiAutoCompleteListOptionsPresenter) {
+        this.decoretee = decoretee;
+    }
+
+    init(params: IMultiAutoCompleteListOptionsPresenterParams) {
+        const options = params.options?.filter(option => !option.selected);
+        this.decoretee.init({
+            ...params,
+            options
+        });
+    }
+
+    get vm() {
+        return this.decoretee.vm;
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.decoretee.setListOpenState(open);
+    };
+
+    setSelectedOption = (value: string) => {
+        this.decoretee.setSelectedOption(value);
+    };
+
+    removeSelectedOption = (value: string) => {
+        this.decoretee.removeSelectedOption(value);
+    };
+
+    resetSelectedOptions = () => {
+        this.decoretee.resetSelectedOptions();
+    };
+
+    addOption = (option: CommandOption) => {
+        this.decoretee.addOption(option);
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts
new file mode 100644
index 00000000000..d808e5f13c2
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts
@@ -0,0 +1,652 @@
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenter
+} from "./MultiAutoCompletePresenter";
+import { MultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { MultiAutoCompleteSelectedOptionPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { MultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+
+describe("MultiAutoCompletePresenter", () => {
+    let presenter: IMultiAutoCompletePresenter;
+    const onValuesChange = jest.fn();
+    const onOpenChange = jest.fn();
+    const onValuesReset = jest.fn();
+
+    beforeEach(() => {
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+
+        presenter = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+    });
+
+    it("should return the compatible `vm.inputVm` based on params", () => {
+        // `placeholder`
+        {
+            presenter.init({ placeholder: "Custom placeholder", onValuesChange });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Custom placeholder");
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValuesChange });
+            expect(presenter.vm.inputVm.placeholder).toEqual("Start typing or select");
+            expect(presenter.vm.inputVm.displayResetAction).toEqual(true);
+        }
+    });
+
+    it("should return the compatible `vm.selectedOptionsVm` based on params`", () => {
+        // `values`
+        {
+            presenter.init({
+                options: ["Option 1", "Option 2", "Option 3"],
+                values: ["Option 1", "Option 2"],
+                onValuesChange
+            });
+            expect(presenter.vm.selectedOptionsVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                }
+            ]);
+        }
+
+        // default: no params
+        {
+            presenter.init({ options: ["Option 1", "Option 2"], onValuesChange });
+            expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+        }
+    });
+
+    it("should return the compatible `vm.optionsListVm` based on params", () => {
+        // with `options` as string
+        {
+            presenter.init({ options: ["Option 1", "Option 2"], onValuesChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        // with `options` as formatted options
+        {
+            presenter.init({
+                onValuesChange,
+                options: [
+                    {
+                        value: "option-1",
+                        label: "Option 1"
+                    },
+                    {
+                        value: "option-2",
+                        label: "Option 2"
+                    },
+                    {
+                        value: "option-3",
+                        label: "Option 3",
+                        disabled: true
+                    },
+                    {
+                        value: "option-4",
+                        label: "Option 4",
+                        separator: true
+                    },
+                    {
+                        value: "option-5",
+                        label: "Option 5",
+                        item: {
+                            anyKey1: "custom-value",
+                            anyKey2: 2
+                        }
+                    }
+                ]
+            });
+
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "option-1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false, // `selected` is overwritten by the presenter
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-3",
+                    label: "Option 3",
+                    disabled: true,
+                    selected: false,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "option-4",
+                    label: "Option 4",
+                    disabled: false,
+                    selected: false,
+                    separator: true,
+                    item: null
+                },
+                {
+                    value: "option-5",
+                    label: "Option 5",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: {
+                        anyKey1: "custom-value",
+                        anyKey2: 2
+                    }
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        // with `options` and `value`
+        {
+            presenter.init({
+                onValuesChange,
+                options: ["Option 1", "Option 2"],
+                values: ["Option 1"]
+            });
+            expect(presenter.vm.optionsListVm.options).toEqual([
+                {
+                    value: "Option 1",
+                    label: "Option 1",
+                    disabled: false,
+                    selected: true,
+                    separator: false,
+                    item: null
+                },
+                {
+                    value: "Option 2",
+                    label: "Option 2",
+                    disabled: false,
+                    selected: false,
+                    separator: false,
+                    item: null
+                }
+            ]);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(false);
+        }
+
+        {
+            // default: no params
+            presenter.init({ onValuesChange });
+            expect(presenter.vm.optionsListVm.options).toEqual([]);
+            expect(presenter.vm.optionsListVm.emptyMessage).toEqual("No results.");
+            expect(presenter.vm.optionsListVm.loadingMessage).toEqual("Loading...");
+            expect(presenter.vm.optionsListVm.isOpen).toEqual(false);
+            expect(presenter.vm.optionsListVm.isEmpty).toEqual(true);
+        }
+    });
+
+    it("should change the `optionsListVm` and `selectedOptionsVm` when `setSelectedOption` is called", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2", "option-1"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should change the `optionsListVm` and `selectedOptionsVm` when `removeSelectedOption` is called", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ],
+            values: ["option-2", "option-1"]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.removeSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.removeSelectedOption("option-1");
+        expect(onValuesChange).toHaveBeenCalledWith([]);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+    });
+
+    it("should set the internal `inputValue` when `setInputValue` is called", () => {
+        presenter.init({ onValuesChange });
+
+        presenter.searchOption("value");
+        expect(presenter.vm.inputVm.value).toEqual("value");
+    });
+
+    it("should set the option as `selected` when the presenter is initialized with a value", () => {
+        presenter.init({
+            onValuesChange,
+            values: ["option-1"],
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+
+    it("should change the `optionListVm` and `selectedOptionsVm` when `resetSelectedOptions` is called", () => {
+        presenter.init({
+            onValuesChange,
+            onValuesReset,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ]
+        });
+
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.setSelectedOption("option-1");
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+
+        presenter.resetSelectedOptions();
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+
+        expect(onValuesChange).toHaveBeenCalledWith([]);
+        expect(onValuesReset).toHaveBeenCalled();
+    });
+
+    it("should change `listVm` and call `onOpenChange` when `setListOpenState` is called", () => {
+        // let's open it
+        presenter.init({ onValuesChange, onOpenChange });
+        presenter.setListOpenState(true);
+        expect(presenter.vm.optionsListVm.isOpen).toBe(true);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+
+        // let's close it
+        presenter.setListOpenState(false);
+        expect(presenter.vm.optionsListVm.isOpen).toBe(false);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should be able to create new options if `allowFreeInput` is set to true", () => {
+        // This feature is disabled by default
+        presenter.init({ onValuesChange });
+        presenter.searchOption("New Option 1");
+        presenter.createOption("New Option 1");
+        expect(presenter.vm.selectedOptionsVm.isEmpty).toEqual(true);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);
+    });
+
+    it("should not display the reset action if `displayResetAction` is set to `false` and option is selected", () => {
+        presenter.init({
+            onValuesChange,
+            options: [
+                {
+                    label: "Option 1",
+                    value: "option-1"
+                },
+                {
+                    label: "Option 2",
+                    value: "option-2"
+                }
+            ],
+            displayResetAction: false
+        });
+
+        presenter.setSelectedOption("option-2");
+        expect(onValuesChange).toHaveBeenCalledWith(["option-2"]);
+        // `displayResetAction` is set to `false` and option is selected
+        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);
+        expect(presenter.vm.optionsListVm.options).toEqual([
+            {
+                label: "Option 1",
+                value: "option-1",
+                disabled: false,
+                selected: false,
+                separator: false,
+                item: null
+            },
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "Option 2",
+                value: "option-2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+    });
+});
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts
new file mode 100644
index 00000000000..792138ed133
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.ts
@@ -0,0 +1,170 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { MultiAutoCompleteOption } from "../domains";
+import { IMultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { IMultiAutoCompleteSelectedOptionsPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { IMultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+import { IMultiAutoCompleteTemporaryOptionPresenter } from "./MultiAutoCompleteTemporaryOptionPresenter";
+
+interface MultiAutoCompletePresenterParams {
+    allowFreeInput?: boolean;
+    displayResetAction?: boolean;
+    emptyMessage?: any;
+    loadingMessage?: any;
+    options?: MultiAutoCompleteOption[];
+    placeholder?: string;
+    values?: string[];
+    onValuesReset?: () => void;
+    onValuesChange: (values: string[]) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+
+interface IMultiAutoCompletePresenter {
+    vm: {
+        inputVm: IMultiAutoCompleteInputPresenter["vm"];
+        selectedOptionsVm: IMultiAutoCompleteSelectedOptionsPresenter["vm"];
+        optionsListVm: IMultiAutoCompleteListOptionsPresenter["vm"];
+        temporaryOptionVm: IMultiAutoCompleteTemporaryOptionPresenter["vm"];
+    };
+    init: (params: MultiAutoCompletePresenterParams) => void;
+    setListOpenState: (open: boolean) => void;
+    searchOption: (value: string) => void;
+    setSelectedOption: (value: string) => void;
+    removeSelectedOption: (value: string) => void;
+    resetSelectedOptions: () => void;
+    createOption: (value: string) => void;
+}
+
+class MultiAutoCompletePresenter implements IMultiAutoCompletePresenter {
+    private params?: MultiAutoCompletePresenterParams = undefined;
+    private inputPresenter: IMultiAutoCompleteInputPresenter;
+    private selectedOptionsPresenter: IMultiAutoCompleteSelectedOptionsPresenter;
+    private optionsListPresenter: IMultiAutoCompleteListOptionsPresenter;
+
+    constructor(
+        inputPresenter: IMultiAutoCompleteInputPresenter,
+        selectedOptionsPresenter: IMultiAutoCompleteSelectedOptionsPresenter,
+        optionsListPresenter: IMultiAutoCompleteListOptionsPresenter
+    ) {
+        this.inputPresenter = inputPresenter;
+        this.selectedOptionsPresenter = selectedOptionsPresenter;
+        this.optionsListPresenter = optionsListPresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: MultiAutoCompletePresenterParams) {
+        this.params = params;
+
+        this.inputPresenter.init({
+            placeholder: params.placeholder,
+            displayResetAction: params.displayResetAction
+        });
+
+        const listOptions = this.getListOptions(params.options, params.values);
+        this.optionsListPresenter.init({
+            options: listOptions,
+            emptyMessage: params.emptyMessage,
+            loadingMessage: params.loadingMessage
+        });
+        this.selectedOptionsPresenter.init({
+            options: this.getSelectedOptions(listOptions, params.values)
+        });
+    }
+
+    get vm() {
+        return {
+            inputVm: this.inputPresenter.vm,
+            selectedOptionsVm: this.selectedOptionsPresenter.vm,
+            optionsListVm: this.optionsListPresenter.vm,
+            temporaryOptionVm: {
+                option: undefined
+            }
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.optionsListPresenter.setListOpenState(open);
+        this.params?.onOpenChange?.(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.inputPresenter.setValue(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.inputPresenter.resetValue();
+        this.optionsListPresenter.setSelectedOption(value);
+
+        const option = this.vm.optionsListVm.options.find(option => option.value === value);
+
+        const commandOption = option
+            ? CommandOption.create(option)
+            : CommandOption.createFromString(value);
+
+        commandOption.selected = true;
+        this.selectedOptionsPresenter.addOption(commandOption);
+
+        this.params?.onValuesChange(this.getSelectedValues());
+    };
+
+    public removeSelectedOption = (value: string) => {
+        this.optionsListPresenter.removeSelectedOption(value);
+        this.selectedOptionsPresenter.removeOption(value);
+
+        this.params?.onValuesChange(this.getSelectedValues());
+    };
+
+    public resetSelectedOptions = () => {
+        this.optionsListPresenter.resetSelectedOptions();
+        this.selectedOptionsPresenter.resetOptions();
+        this.inputPresenter.resetValue();
+
+        this.params?.onValuesChange(this.getSelectedValues());
+        this.params?.onValuesReset?.();
+    };
+
+    public createOption = () => {
+        return;
+    };
+
+    private getListOptions(
+        options: MultiAutoCompleteOption[] = [],
+        values: string[] = []
+    ): CommandOption[] {
+        return options.map(option => {
+            const commandOption =
+                typeof option === "string"
+                    ? CommandOption.createFromString(option)
+                    : CommandOption.create(option);
+
+            commandOption.selected = values.includes(commandOption.value);
+
+            return commandOption;
+        });
+    }
+
+    private getSelectedOptions(
+        commandOptions: CommandOption[],
+        values: string[] = []
+    ): CommandOption[] {
+        return values.map(value => {
+            const option = commandOptions.find(option => option.value === value);
+
+            if (!option) {
+                return CommandOption.createFromString(value);
+            }
+
+            return option;
+        });
+    }
+
+    private getSelectedValues() {
+        return this.selectedOptionsPresenter.vm.options.map(option => option.value);
+    }
+}
+
+export {
+    MultiAutoCompletePresenter,
+    type IMultiAutoCompletePresenter,
+    type MultiAutoCompletePresenterParams
+};
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts
new file mode 100644
index 00000000000..4b60226a8b4
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.test.ts
@@ -0,0 +1,83 @@
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenter
+} from "./MultiAutoCompletePresenter";
+import { MultiAutoCompleteInputPresenter } from "./MultiAutoCompleteInputPresenter";
+import { MultiAutoCompleteSelectedOptionPresenter } from "./MultiAutoCompleteSelectedOptionsPresenter";
+import { MultiAutoCompleteListOptionsPresenter } from "./MultiAutoCompleteListOptionsPresenter";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter";
+import { MultiAutoCompletePresenterWithFreeInput } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput";
+
+describe("MultiAutoCompletePresenterWithFreeInput", () => {
+    let presenter: IMultiAutoCompletePresenter;
+    const onValuesChange = jest.fn();
+
+    beforeEach(() => {
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+        const temporaryOptionPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
+
+        const decoretee = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+        presenter = new MultiAutoCompletePresenterWithFreeInput(
+            temporaryOptionPresenter,
+            decoretee
+        );
+    });
+
+    it("should return the compatible `vm.temporaryOptionVm` based on params", () => {
+        // default: no params
+        presenter.init({ onValuesChange });
+        expect(presenter.vm.temporaryOptionVm.option).toEqual(undefined);
+    });
+
+    it("should be able to create new options", () => {
+        presenter.init({ onValuesChange });
+
+        // Let's create the first option
+        presenter.searchOption("New Option 1");
+        presenter.createOption("New Option 1");
+        expect(presenter.vm.selectedOptionsVm.isEmpty).toEqual(false);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "New Option 1",
+                value: "New Option 1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(onValuesChange).toHaveBeenCalledWith(["New Option 1"]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+
+        // Let's create the second option
+        presenter.searchOption("New Option 2");
+        presenter.createOption("New Option 2");
+        expect(presenter.vm.selectedOptionsVm.isEmpty).toEqual(false);
+        expect(presenter.vm.selectedOptionsVm.options).toEqual([
+            {
+                label: "New Option 1",
+                value: "New Option 1",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            },
+            {
+                label: "New Option 2",
+                value: "New Option 2",
+                disabled: false,
+                selected: true,
+                separator: false,
+                item: null
+            }
+        ]);
+        expect(onValuesChange).toHaveBeenCalledWith(["New Option 1", "New Option 2"]);
+        expect(presenter.vm.inputVm.value).toEqual("");
+    });
+});
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts
new file mode 100644
index 00000000000..6875bf93859
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.ts
@@ -0,0 +1,64 @@
+import { makeAutoObservable } from "mobx";
+import { IMultiAutoCompleteTemporaryOptionPresenter } from "./MultiAutoCompleteTemporaryOptionPresenter";
+import {
+    IMultiAutoCompletePresenter,
+    MultiAutoCompletePresenterParams
+} from "./MultiAutoCompletePresenter";
+
+class MultiAutoCompletePresenterWithFreeInput implements IMultiAutoCompletePresenter {
+    private temporaryOptionPresenter: IMultiAutoCompleteTemporaryOptionPresenter;
+    private multiAutoCompletePresenter: IMultiAutoCompletePresenter;
+
+    constructor(
+        temporaryOptionPresenter: IMultiAutoCompleteTemporaryOptionPresenter,
+        multiAutoCompletePresenter: IMultiAutoCompletePresenter
+    ) {
+        this.temporaryOptionPresenter = temporaryOptionPresenter;
+        this.multiAutoCompletePresenter = multiAutoCompletePresenter;
+        makeAutoObservable(this);
+    }
+
+    init(params: MultiAutoCompletePresenterParams) {
+        this.multiAutoCompletePresenter.init(params);
+        this.temporaryOptionPresenter.init();
+    }
+
+    get vm() {
+        return {
+            ...this.multiAutoCompletePresenter.vm,
+            temporaryOptionVm: this.temporaryOptionPresenter.vm
+        };
+    }
+
+    setListOpenState = (open: boolean) => {
+        this.multiAutoCompletePresenter.setListOpenState(open);
+    };
+
+    public searchOption = (value: string) => {
+        this.multiAutoCompletePresenter.searchOption(value);
+        this.temporaryOptionPresenter.setOption(value);
+    };
+
+    public setSelectedOption = (value: string) => {
+        this.multiAutoCompletePresenter.setSelectedOption(value);
+    };
+
+    public removeSelectedOption = (value: string) => {
+        this.multiAutoCompletePresenter.removeSelectedOption(value);
+        this.temporaryOptionPresenter.resetOption();
+    };
+
+    public resetSelectedOptions = () => {
+        this.multiAutoCompletePresenter.resetSelectedOptions();
+        this.temporaryOptionPresenter.resetOption();
+    };
+
+    public createOption = (value: string) => {
+        this.multiAutoCompletePresenter.createOption(value);
+        this.multiAutoCompletePresenter.searchOption("");
+        this.multiAutoCompletePresenter.setSelectedOption(value);
+        this.temporaryOptionPresenter.resetOption();
+    };
+}
+
+export { MultiAutoCompletePresenterWithFreeInput };
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts
new file mode 100644
index 00000000000..d74a3f7fecd
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.ts
@@ -0,0 +1,54 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { ListCache } from "../domains";
+
+interface IMultiAutoCompleteSelectedOptionsParams {
+    options?: CommandOption[];
+}
+
+export interface IMultiAutoCompleteSelectedOptionsPresenter {
+    vm: {
+        options: CommandOptionFormatted[];
+        isEmpty: boolean;
+    };
+    init: (params: IMultiAutoCompleteSelectedOptionsParams) => void;
+    addOption: (option: CommandOption) => void;
+    removeOption: (value: string) => void;
+    resetOptions: () => void;
+}
+
+export class MultiAutoCompleteSelectedOptionPresenter
+    implements IMultiAutoCompleteSelectedOptionsPresenter
+{
+    private options = new ListCache<CommandOption>();
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init(params: IMultiAutoCompleteSelectedOptionsParams) {
+        this.options.clear();
+        params.options && this.options.addItems(params.options);
+    }
+
+    get vm() {
+        return {
+            options: this.options.getItems().map(option => CommandOptionFormatter.format(option)),
+            isEmpty: !this.options.hasItems()
+        };
+    }
+
+    public addOption = (option: CommandOption) => {
+        this.options.addItems([option]);
+    };
+
+    public removeOption = (value: string) => {
+        this.options.removeItems(option => option.value === value);
+    };
+
+    public resetOptions = () => {
+        this.options.clear();
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts
new file mode 100644
index 00000000000..d5f661cfb1e
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.ts
@@ -0,0 +1,41 @@
+import { makeAutoObservable } from "mobx";
+import { CommandOption } from "~/Command/domain/CommandOption";
+import { CommandOptionFormatted } from "~/Command/domain/CommandOptionFormatted";
+import { CommandOptionFormatter } from "~/Command/domain/CommandOptionFormatter";
+
+export interface IMultiAutoCompleteTemporaryOptionPresenter {
+    vm: {
+        option?: CommandOptionFormatted;
+    };
+    init: () => void;
+    setOption: (value: string) => void;
+    resetOption: () => void;
+}
+
+export class MultiAutoCompleteTemporaryOptionPresenter
+    implements IMultiAutoCompleteTemporaryOptionPresenter
+{
+    private option?: CommandOption = undefined;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    init() {
+        return;
+    }
+
+    get vm() {
+        return {
+            option: this.option ? CommandOptionFormatter.format(this.option) : undefined
+        };
+    }
+
+    public setOption = (value: string) => {
+        this.option = CommandOption.createFromString(value);
+    };
+
+    public resetOption = () => {
+        this.option = undefined;
+    };
+}
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts
new file mode 100644
index 00000000000..4ecd12bda21
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/presenters/index.ts
@@ -0,0 +1,7 @@
+export * from "./MultiAutoCompletePresenter";
+export * from "./MultiAutoCompletePresenterWithFreeInput";
+export * from "./MultiAutoCompleteInputPresenter";
+export * from "./MultiAutoCompleteListOptionsPresenter";
+export * from "./MultiAutoCompleteListOptionsPresenterWithUniqueValues";
+export * from "./MultiAutoCompleteSelectedOptionsPresenter";
+export * from "./MultiAutoCompleteTemporaryOptionPresenter";
diff --git a/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts b/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts
new file mode 100644
index 00000000000..cdf1956c8fb
--- /dev/null
+++ b/packages/admin-ui/src/MultiAutoComplete/primitives/useMultiAutoComplete.ts
@@ -0,0 +1,98 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive";
+import {
+    MultiAutoCompleteInputPresenter,
+    MultiAutoCompleteListOptionsPresenter,
+    MultiAutoCompleteListOptionsPresenterWithUniqueValues,
+    MultiAutoCompletePresenter,
+    MultiAutoCompletePresenterParams,
+    MultiAutoCompletePresenterWithFreeInput,
+    MultiAutoCompleteSelectedOptionPresenter
+} from "./presenters";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter";
+
+export const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {
+    const params: MultiAutoCompletePresenterParams = useMemo(
+        () => ({
+            emptyMessage: props.emptyMessage,
+            loadingMessage: props.loadingMessage,
+            options: props.options,
+            placeholder: props.placeholder,
+            values: props.values,
+            onValuesChange: props.onValuesChange,
+            onValuesReset: props.onValuesReset,
+            onOpenChange: props.onOpenChange,
+            displayResetAction: props.displayResetAction
+        }),
+        [
+            props.emptyMessage,
+            props.loadingMessage,
+            props.options,
+            props.placeholder,
+            props.values,
+            props.onValuesChange,
+            props.onValuesReset,
+            props.onOpenChange,
+            props.displayResetAction
+        ]
+    );
+
+    const presenter = useMemo(() => {
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+        const optionsListWithUniqueValues =
+            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);
+
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+
+        let presenter = new MultiAutoCompletePresenter(
+            inputPresenter,
+            selectedOptionsPresenter,
+            optionsListPresenter
+        );
+
+        if (props?.uniqueValues) {
+            presenter = new MultiAutoCompletePresenter(
+                inputPresenter,
+                selectedOptionsPresenter,
+                optionsListWithUniqueValues
+            );
+        }
+
+        if (props?.allowFreeInput) {
+            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
+            const withPresenter = new MultiAutoCompletePresenterWithFreeInput(
+                temporaryOptionsPresenter,
+                presenter
+            );
+            withPresenter.init(params);
+            return withPresenter;
+        } else {
+            presenter.init(params);
+            return presenter;
+        }
+    }, [props.allowFreeInput, props.uniqueValues]);
+
+    const [vm, setVm] = useState(presenter.vm);
+
+    useEffect(() => {
+        presenter.init(params);
+    }, [params, presenter]);
+
+    useEffect(() => {
+        return autorun(() => {
+            setVm(presenter.vm);
+        });
+    }, [presenter]);
+
+    return {
+        vm,
+        setSelectedOption: presenter.setSelectedOption,
+        removeSelectedOption: presenter.removeSelectedOption,
+        searchOption: presenter.searchOption,
+        resetSelectedOptions: presenter.resetSelectedOptions,
+        setListOpenState: presenter.setListOpenState,
+        createOption: presenter.createOption
+    };
+};
diff --git a/packages/admin-ui/src/Popover/Popover.tsx b/packages/admin-ui/src/Popover/Popover.tsx
new file mode 100644
index 00000000000..4574cc5ef66
--- /dev/null
+++ b/packages/admin-ui/src/Popover/Popover.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn, withStaticProps } from "~/utils";
+
+type PopoverContentProps = PopoverPrimitive.PopoverContentProps;
+
+const PopoverContent = ({
+    className,
+    align = "center",
+    sideOffset = 6,
+    ...props
+}: PopoverContentProps) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                [
+                    "z-50 rounded-sm overflow-hidden border-sm border-neutral-muted shadow-lg outline-none",
+                    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+                ],
+                className
+            )}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+);
+
+const Popover = withStaticProps(PopoverPrimitive.Root, {
+    Anchor: PopoverPrimitive.Anchor,
+    Content: PopoverContent,
+    Portal: PopoverPrimitive.Portal,
+    Trigger: PopoverPrimitive.Trigger
+});
+
+export { Popover, type PopoverContent };
diff --git a/packages/admin-ui/src/Popover/index.ts b/packages/admin-ui/src/Popover/index.ts
new file mode 100644
index 00000000000..72f124f6d38
--- /dev/null
+++ b/packages/admin-ui/src/Popover/index.ts
@@ -0,0 +1 @@
+export * from "./Popover";
diff --git a/packages/admin-ui/src/Select/Select.tsx b/packages/admin-ui/src/Select/Select.tsx
index bc8c48b7783..af72475c1a7 100644
--- a/packages/admin-ui/src/Select/Select.tsx
+++ b/packages/admin-ui/src/Select/Select.tsx
@@ -20,20 +20,18 @@ const DecoratableSelect = ({
     validation,
     ...props
 }: SelectGroupProps) => {
-    {
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-        const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
 
-        return (
-            <div className={"w-full"}>
-                <FormComponentLabel text={label} required={required} disabled={disabled} />
-                <FormComponentDescription text={description} />
-                <SelectPrimitive {...props} disabled={disabled} />
-                <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
-                <FormComponentNote text={note} />
-            </div>
-        );
-    }
+    return (
+        <div className={"w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} />
+            <SelectPrimitive {...props} disabled={disabled} />
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <FormComponentNote text={note} />
+        </div>
+    );
 };
 const Select = makeDecoratable("Select", DecoratableSelect);
 
diff --git a/packages/admin-ui/src/Separator/Separator.tsx b/packages/admin-ui/src/Separator/Separator.tsx
index fc6e654f0fb..eef1a21ff89 100644
--- a/packages/admin-ui/src/Separator/Separator.tsx
+++ b/packages/admin-ui/src/Separator/Separator.tsx
@@ -43,24 +43,25 @@ const separatorVariants = cva("shrink-0", {
     }
 });
 
-export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> &
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> &
     VariantProps<typeof separatorVariants>;
 
-const SeparatorBase = React.forwardRef<
-    React.ElementRef<typeof SeparatorPrimitive.Root>,
-    SeparatorProps
->(({ className, orientation, margin, variant, decorative = true, ...props }, ref) => (
+const SeparatorBase = ({
+    className,
+    orientation,
+    margin,
+    variant,
+    decorative = true,
+    ...props
+}: SeparatorProps) => (
     <SeparatorPrimitive.Root
-        ref={ref}
         decorative={decorative}
         orientation={orientation}
         className={separatorVariants({ orientation, margin, variant, className })}
         {...props}
     />
-));
-
-SeparatorBase.displayName = SeparatorPrimitive.Root.displayName;
+);
 
 const Separator = makeDecoratable("Separator", SeparatorBase);
 
-export { Separator };
+export { Separator, type SeparatorProps };
diff --git a/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx b/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx
index 4ca593a481b..22d779f4791 100644
--- a/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx
+++ b/packages/admin-ui/src/Textarea/TextareaPrimitive.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { makeDecoratable, cva, type VariantProps, cn } from "~/utils";
+import { cn, cva, type VariantProps } from "~/utils";
 
 const textareaVariants = cva(
     [
@@ -61,21 +61,27 @@ const textareaVariants = cva(
     }
 );
 
-type TextareaPrimitiveProps = React.ComponentProps<"textarea"> &
-    VariantProps<typeof textareaVariants>;
+interface TextareaPrimitiveProps
+    extends React.ComponentProps<"textarea">,
+        VariantProps<typeof textareaVariants> {
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+}
 
-const DecoratableTextareaPrimitive = React.forwardRef<HTMLTextAreaElement, TextareaPrimitiveProps>(
-    ({ className, variant, invalid, size, ...props }, ref) => {
-        return (
-            <textarea
-                className={cn(textareaVariants({ variant, invalid, size }), className)}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-DecoratableTextareaPrimitive.displayName = "TextareaPrimitive";
-const TextareaPrimitive = makeDecoratable("TextareaPrimitive", DecoratableTextareaPrimitive);
+const TextareaPrimitive = ({
+    className,
+    variant,
+    invalid,
+    size,
+    textareaRef,
+    ...props
+}: TextareaPrimitiveProps) => {
+    return (
+        <textarea
+            ref={textareaRef}
+            className={cn(textareaVariants({ variant, invalid, size }), className)}
+            {...props}
+        />
+    );
+};
 
 export { TextareaPrimitive, type TextareaPrimitiveProps };
diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts
index e776720146a..df3ec4f644f 100644
--- a/packages/admin-ui/src/index.ts
+++ b/packages/admin-ui/src/index.ts
@@ -1,15 +1,19 @@
 export * from "./Alert";
+export * from "./AutoComplete";
 export * from "./Avatar";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./CodeEditor";
+export * from "./DropdownMenu";
 export * from "./FormComponent";
 export * from "./Grid";
 export * from "./Heading";
+export * from "./Icon";
 export * from "./Input";
 export * from "./Label";
-export * from "./DropdownMenu";
+export * from "./MultiAutoComplete";
+export * from "./Popover";
 export * from "./Progress";
 export * from "./Providers";
 export * from "./RadioGroup";
diff --git a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
index 483389de5b8..84c43f87293 100644
--- a/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
+++ b/packages/app-aco/src/dialogs/DialogSetPermissions/UsersTeamsMultiAutocomplete.tsx
@@ -20,6 +20,7 @@ export const UsersTeamsMultiAutocomplete = (props: UsersTeamsMultiAutocompletePr
                 unique={true}
                 onChange={props.onChange}
                 value={props.value || []}
+                displayResetAction={false}
             />
         </>
     );
diff --git a/packages/app-admin/src/styles.scss b/packages/app-admin/src/styles.scss
index 661f11cc324..3029ad3a2fc 100644
--- a/packages/app-admin/src/styles.scss
+++ b/packages/app-admin/src/styles.scss
@@ -1,3 +1,2 @@
-@import "./styles/reset";
 @import "./styles/theme";
 @import "./styles/material";
diff --git a/packages/app-admin/src/styles/material.scss b/packages/app-admin/src/styles/material.scss
index 7b4d5c8707f..ce1feab3ce2 100644
--- a/packages/app-admin/src/styles/material.scss
+++ b/packages/app-admin/src/styles/material.scss
@@ -38,5 +38,5 @@ body {
   --mdc-typography-font-family: #{$mdc-typography-font-family};
   --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
 
-  font-family: "Source Sans Pro";
+  //font-family: "Source Sans Pro";
 }
diff --git a/packages/app-admin/src/styles/reset.scss b/packages/app-admin/src/styles/reset.scss
deleted file mode 100644
index 3c5f558d261..00000000000
--- a/packages/app-admin/src/styles/reset.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "reset-css/sass/reset";
diff --git a/packages/app-admin/src/styles/theme.scss b/packages/app-admin/src/styles/theme.scss
index 5f95635bfbd..4cd24587aad 100644
--- a/packages/app-admin/src/styles/theme.scss
+++ b/packages/app-admin/src/styles/theme.scss
@@ -27,50 +27,50 @@ $webiny-theme-dark-text-hint-on-dark: rgba(255, 255, 255, 0.15);
 $webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
 
 // webiny typography
-$webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-font-family: inherit !default;
 $webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 // import required fonts
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
+//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
 
-body {
-  font-size: 16px;
-}
-
-a {
-  color: var(--webiny-theme-color-primary, #ee896b);
-  text-decoration: none;
-}
-
-// Default heading styles
-h1 {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-h2 {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-h3 {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-h4 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-h5 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-h6 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@import "@webiny/ui/styles.scss";
+//body {
+//  font-size: 16px;
+//}
+//
+//a {
+//  color: var(--webiny-theme-color-primary, #ee896b);
+//  text-decoration: none;
+//}
+//
+//// Default heading styles
+//h1 {
+//  font-size: 3rem;
+//  line-height: 1;
+//}
+//
+//h2 {
+//  font-size: 2.25rem;
+//  line-height: 2.5rem;
+//}
+//
+//h3 {
+//  font-size: 1.875rem;
+//  line-height: 2.25rem;
+//}
+//
+//h4 {
+//  font-size: 1.5rem;
+//  line-height: 2rem;
+//}
+//
+//h5 {
+//  font-size: 1.25rem;
+//  line-height: 1.75rem;
+//}
+//
+//h6 {
+//  font-size: 1.125rem;
+//  line-height: 1.75rem;
+//}
+//
+//@import "@webiny/ui/styles.scss";
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
index e4c8280eb6a..5f659973adb 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Remove.tsx
@@ -6,8 +6,6 @@ import { useConfirmationDialog } from "@webiny/app-admin";
 import { ButtonLink } from "./elements/ButtonLink";
 
 const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
-    fontWeight: 500,
     fontSize: "14px",
     lineHeight: "20px",
     letterSpacing: "0.1px",
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
index ef8bd879b36..d885eb918b0 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/entry/Select.tsx
@@ -45,7 +45,6 @@ const Icon = styled("div")(({ selected }: IconProps) => {
 });
 
 const Text = styled("span")({
-    fontFamily: "Source Sans Pro",
     fontWeight: 500,
     fontSize: "14px",
     lineHeight: "20px",
diff --git a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
index cfac00fa601..20925ad86f2 100644
--- a/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
+++ b/packages/cwp-template-aws/template/common/apps/admin/src/App.scss
@@ -13,7 +13,7 @@ $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
 $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
 $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 $webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-$webiny-theme-typography-font-family: "Source Sans Pro";
+//$webiny-theme-typography-font-family: "Source Sans Pro";
 
 // Import admin app styles
 @import "~@webiny/app-serverless-cms/styles.scss";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9805d98aa90..09c1e95d116 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,7 +34,6 @@
     "classnames": "^2.5.1",
     "cropperjs": "^1.4.3",
     "dot-prop-immutable": "^2.1.1",
-    "downshift": "^2.1.5",
     "emotion": "10.0.27",
     "keycode": "^2.2.0",
     "load-script": "^1.0.0",
@@ -47,7 +46,6 @@
     "react-columned": "^1.1.3",
     "react-custom-scrollbars": "^4.2.1",
     "react-loading-skeleton": "^3.1.0",
-    "react-spinner-material": "1.1.4",
     "react-transition-group": "^4.4.5",
     "timeago-react": "^3.0.6"
   },
diff --git a/packages/ui/src/AutoComplete/AutoComplete.tsx b/packages/ui/src/AutoComplete/AutoComplete.tsx
index 74621fe00e6..c8604ce1cbb 100644
--- a/packages/ui/src/AutoComplete/AutoComplete.tsx
+++ b/packages/ui/src/AutoComplete/AutoComplete.tsx
@@ -1,31 +1,6 @@
-import React from "react";
-import Downshift, { ControllerStateAndHelpers, PropGetters } from "downshift";
-import { Input } from "~/Input";
-import classNames from "classnames";
-import { Elevation } from "~/Elevation";
-import { Typography } from "~/Typography";
-import keycode from "keycode";
-import { autoCompleteStyle, suggestionList } from "./styles";
+import React, { useCallback, useMemo } from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import isEqual from "lodash/isEqual";
-import MaterialSpinner from "react-spinner-material";
-import { css } from "emotion";
-
-const menuStyles = css({
-    top: "unset !important",
-    bottom: 75
-});
-
-const listStyles = css({
-    "&.autocomplete__options-list": {
-        listStyle: "none",
-        paddingLeft: 0,
-        "& li": {
-            margin: 0
-        }
-    }
-});
+import { AutoComplete as AdminAutoComplete } from "@webiny/admin-ui";
 
 export enum Placement {
     top = "top",
@@ -47,311 +22,81 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
 
     // Size - small, medium or large
     size?: "small" | "medium" | "large";
-}
-
-interface State {
-    inputValue: string;
-}
 
-const Spinner = () => {
-    return (
-        <MaterialSpinner
-            size={24}
-            spinnerColor={"var(--mdc-theme-primary)"}
-            spinnerWidth={2}
-            visible
-        />
-    );
-};
-
-interface RenderOptionsParams
-    extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    placement?: Placement;
+    // Indicates if the reset action should be displayed.
+    displayResetAction?: boolean;
 }
 
-interface OptionsListProps {
-    placement?: Placement;
-    getMenuProps: PropGetters<Record<string, any>>["getMenuProps"];
-    children: React.ReactNode;
-}
-
-const OptionsList = ({ placement, getMenuProps, children }: OptionsListProps) => {
-    return (
-        <Elevation
-            z={1}
-            className={classNames({
-                [menuStyles]: placement === Placement.top
-            })}
-        >
-            <ul
-                className={classNames("autocomplete__options-list", listStyles)}
-                {...getMenuProps()}
-            >
-                {children}
-            </ul>
-        </Elevation>
-    );
-};
-
-class AutoComplete extends React.Component<AutoCompleteProps, State> {
-    static defaultProps: Partial<AutoCompleteProps> = {
-        valueProp: "id",
-        textProp: "name",
-        options: [],
-        placement: Placement.bottom,
-        /**
-         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
-         */
-        renderItem(item: any) {
-            return (
-                <Typography use={"body2"}>
-                    {getOptionText(item, (this as unknown as AutoComplete).props)}
-                </Typography>
-            );
-        }
-    };
-
-    public override state: State = {
-        inputValue: ""
-    };
-
-    /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
-     */
-    downshift: any = React.createRef();
-
-    public override componentDidUpdate(previousProps: AutoCompleteProps) {
-        const { value, options } = this.props;
-        const { value: previousValue } = previousProps;
-
-        if (!isEqual(value, previousValue)) {
-            let item = null;
-
-            if (value) {
-                if (typeof value === "object") {
-                    item = value;
-                } else {
-                    item =
-                        options.find(option => {
-                            return value === getOptionValue(option, this.props);
-                        }) || null;
-                }
-            }
-
-            const { current: downshift } = this.downshift;
-            downshift && downshift.selectItem(item);
-        }
-    }
-
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-    private renderOptions({
-        options,
-        isOpen,
-        highlightedIndex,
-        selectedItem,
-        getMenuProps,
-        getItemProps,
-        placement
-    }: RenderOptionsParams) {
-        if (!isOpen) {
-            return null;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const AutoComplete = ({
+    size,
+    onChange,
+    valueProp = "id",
+    textProp = "name",
+    renderItem,
+    noResultFound,
+    useSimpleValues,
+    ...props
+}: AutoCompleteProps) => {
+    const inputSize = useMemo(() => {
+        if (size === "medium") {
+            return "md";
         }
-        /**
-         * Suggest user to start typing when there are no options available to choose from.
-         */
-        if (!this.state.inputValue && !options.length) {
-            return (
-                <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>Start typing to find entry</Typography>
-                    </li>
-                </OptionsList>
-            );
-        }
-
-        const { renderItem } = this.props;
 
-        const filtered = options.filter(item => {
-            // 2) At the end, we want to show only options that are matched by typed text.
-            if (!this.state.inputValue) {
-                return true;
-            }
+        return "lg";
+    }, [size]);
 
-            if (item.aliases) {
-                return findInAliases(item, this.state.inputValue);
+    const options = useMemo(() => {
+        return props.options.map(option => {
+            if (useSimpleValues) {
+                return {
+                    label: option,
+                    value: option
+                };
             }
 
-            return getOptionText(item, this.props)
-                .toLowerCase()
-                .includes(this.state.inputValue.toLowerCase());
+            return {
+                label: option[textProp],
+                value: option[valueProp],
+                disabled: option.disabled,
+                item: option
+            };
         });
+    }, [props.options, textProp, valueProp, useSimpleValues]);
 
-        if (!filtered.length) {
-            return (
-                <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>No results.</Typography>
-                        {this.props.noResultFound}
-                    </li>
-                </OptionsList>
-            );
+    const value = useMemo(() => {
+        if (!props.value) {
+            return undefined;
         }
 
-        return (
-            <OptionsList placement={placement} getMenuProps={getMenuProps}>
-                {filtered.map((item, index) => {
-                    const itemValue = getOptionValue(item, this.props);
-
-                    // Base classes.
-                    const itemClassNames = {
-                        [suggestionList]: true,
-                        highlighted: highlightedIndex === index,
-                        selected: false
-                    };
-
-                    // Add "selected" class if the item is selected.
-                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {
-                        itemClassNames.selected = true;
-                    }
-
-                    // Render the item.
-                    return (
-                        <li
-                            key={itemValue}
-                            {...getItemProps({
-                                index,
-                                item,
-                                className: classNames(itemClassNames)
-                            })}
-                        >
-                            {renderItem.call(this, item, index)}
-                        </li>
-                    );
-                })}
-            </OptionsList>
-        );
-    }
+        return props.value[valueProp as keyof AutoCompleteProps["value"]] as string;
+    }, [props.value, valueProp]);
 
-    public override render() {
-        const {
-            className,
-            options,
-            onChange,
-            value,
-            // valueProp,
-            // textProp,
-            onInput,
-            validation = {
-                isValid: null,
-                message: null
-            },
-            placement,
-            ...otherInputProps
-        } = this.props;
+    const onValueChange = useCallback(
+        (value: any) => {
+            const option = options.find(option => option.value === value);
 
-        // Downshift related props.
-        const downshiftProps = {
-            className: autoCompleteStyle,
-            itemToString: (item: any) => getOptionText(item, this.props),
-            defaultSelectedItem: value,
-            onChange: (selection: string) => {
-                if (!selection || !onChange) {
-                    return;
-                }
-                onChange(getOptionValue(selection, this.props), selection);
-                this.setState(state => ({
-                    ...state,
-                    inputValue: ""
-                }));
+            if (!option) {
+                return;
             }
-        };
 
-        return (
-            <div
-                className={classNames(
-                    autoCompleteStyle,
-                    this.props.size ? `webiny-ui-autocomplete--size-${this.props.size}` : null,
-                    className
-                )}
-            >
-                <Downshift {...downshiftProps} ref={this.downshift}>
-                    {({ getInputProps, openMenu, ...rest }) => (
-                        <div>
-                            <Input
-                                {...getInputProps({
-                                    // This prop is above `otherInputProps` since it can be overridden by the user.
-                                    trailingIcon: this.props.loading && <Spinner />,
-                                    ...otherInputProps,
-                                    // @ts-expect-error
-                                    size: this.props.size,
-                                    validation,
-                                    rawOnChange: true,
-                                    onChange: ev => ev,
-                                    onBlur: ev => ev,
-                                    onFocus: ev => {
-                                        openMenu();
-                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);
-                                    },
-                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {
-                                        const keyCode: string = keycode(ev as unknown as Event);
-
-                                        if (keyCode === "backspace") {
-                                            setTimeout(() => {
-                                                if (onChange) {
-                                                    onChange(null);
-                                                    openMenu();
-                                                }
-                                            }, 50);
-                                        }
-                                    },
-                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {
-                                        const keyCode: string = keycode(ev as unknown as Event);
-
-                                        const target = ev.currentTarget;
-                                        const inputValue = target.value || "";
-
-                                        // If user pressed 'esc', 'enter' or similar...
-                                        if (
-                                            keyCode &&
-                                            keyCode.length > 1 &&
-                                            keyCode !== "backspace"
-                                        ) {
-                                            return;
-                                        }
-
-                                        // If values are the same, exit, do not update current search term.
-                                        if (inputValue === this.state.inputValue) {
-                                            return;
-                                        }
-
-                                        this.setState(
-                                            state => ({
-                                                ...state,
-                                                inputValue
-                                            }),
-                                            () => {
-                                                onInput && onInput(inputValue);
-                                            }
-                                        );
-                                    }
-                                })}
-                            />
-                            {!otherInputProps.disabled &&
-                                !otherInputProps.readOnly &&
-                                this.renderOptions({
-                                    ...rest,
-                                    options,
-                                    placement
-                                })}
-                        </div>
-                    )}
-                </Downshift>
-            </div>
-        );
-    }
-}
+            onChange?.(value, option.item);
+        },
+        [onChange, options]
+    );
 
-export { AutoComplete };
+    return (
+        <AdminAutoComplete
+            {...props}
+            value={value}
+            options={options}
+            onValueChange={onValueChange}
+            size={inputSize}
+            optionRenderer={renderItem}
+            emptyMessage={noResultFound}
+        />
+    );
+};
diff --git a/packages/ui/src/AutoComplete/AutoCompleteReadme.md b/packages/ui/src/AutoComplete/AutoCompleteReadme.md
deleted file mode 100644
index 3bfd93b5368..00000000000
--- a/packages/ui/src/AutoComplete/AutoCompleteReadme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# AutoComplete
-
-### Description
-
-`AutoComplete` component lets users select a value from a list of suggestions (created based on their input).
-
-### Import
-
-```js
-import { AutoComplete } from "@webiny/ui/AutoComplete";
-```
diff --git a/packages/ui/src/AutoComplete/MultiAutoComplete.tsx b/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
index 1f5874e0ded..754c5657146 100644
--- a/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
+++ b/packages/ui/src/AutoComplete/MultiAutoComplete.tsx
@@ -1,74 +1,6 @@
-import React from "react";
-import Downshift, { ControllerStateAndHelpers, PropGetters } from "downshift";
-import MaterialSpinner from "react-spinner-material";
-import { Input } from "~/Input";
-import { Chips, Chip } from "../Chips";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import { List, ListItem, ListItemMeta } from "~/List";
-import { IconButton } from "~/Button";
-import classNames from "classnames";
-import { Elevation } from "~/Elevation";
-import { Typography } from "~/Typography";
-import { autoCompleteStyle, suggestionList } from "./styles";
+import React, { useCallback, useMemo } from "react";
 import { AutoCompleteBaseProps } from "./types";
-import { FormElementMessage } from "~/FormElementMessage";
-import { ReactComponent as BaselineCloseIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as PrevIcon } from "./icons/navigate_before-24px.svg";
-import { ReactComponent as NextIcon } from "./icons/navigate_next-24px.svg";
-import { ReactComponent as PrevAllIcon } from "./icons/skip_previous-24px.svg";
-import { ReactComponent as NextAllIcon } from "./icons/skip_next-24px.svg";
-import { ReactComponent as DeleteIcon } from "./icons/baseline-close-24px.svg";
-import { ReactComponent as ReorderIcon } from "./icons/reorder_black_24dp.svg";
-import { css } from "emotion";
-import { ListItemGraphic } from "~/List";
-import { AutoCompleteProps } from "~/AutoComplete/AutoComplete";
-
-const listItemMetaClassName = css({
-    display: "table"
-});
-
-const iconButtonClassName = css({
-    display: "table-cell !important"
-});
-
-const style = {
-    pagination: {
-        bar: css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            borderBottom: "2px solid #fa5723",
-            padding: "6px 0"
-        }),
-        pages: css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
-        }),
-        searchInput: css({
-            height: "42px !important"
-        }),
-        list: css({
-            padding: "0 0 5px 0 !important",
-            ".mdc-deprecated-list-item": {
-                borderBottom: "1px solid var(--mdc-theme-on-background)"
-            }
-        }),
-        secondaryText: css({
-            color: "var(--mdc-theme-text-secondary-on-background)"
-        })
-    }
-};
-
-const listStyles = css({
-    "&.multi-autocomplete__options-list": {
-        listStyle: "none",
-        paddingLeft: 0,
-        "& li": {
-            margin: 0
-        }
-    }
-});
+import { MultiAutoComplete as AdminMultiAutoComplete } from "@webiny/admin-ui";
 
 interface SelectionItem {
     name: string;
@@ -80,7 +12,7 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
     /**
      * Prevents adding the same item to the list twice.
      */
-    unique: boolean;
+    unique?: boolean;
 
     /**
      * Set if custom values (not from list of suggestions) are allowed.
@@ -95,7 +27,7 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
     /**
      * Use custom renderer for selected items.
      */
-    renderMultipleSelection?: ((items: any) => React.ReactNode | null) | null;
+    renderMultipleSelection?: ((items: any, index: number) => React.ReactNode | null) | null;
 
     /**
      * Use data list instead of default Chips component. Useful when expecting a lot of data.
@@ -106,601 +38,109 @@ export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "val
      * Render list item when `useMultipleSelectionList` is used.
      */
     renderListItemLabel?: (item: any) => React.ReactNode;
+
     /**
      * Render in meta wrapper
      */
     renderListItemOptions?: (item: any) => React.ReactNode | null;
 
-    /* A component that renders supporting UI in case of no result found. */
+    /**
+     *  A component that renders supporting UI in case of no result found.
+     */
     noResultFound?: React.ReactNode;
+
     /**
      * Value is an array of strings. But can be undefined.
      */
     value?: MultiAutoCompletePropsValue;
-}
-
-interface MultiAutoCompleteState {
-    inputValue: string;
-    multipleSelectionPage: number;
-    multipleSelectionSearch: string;
-    reorderFormVisible: string;
-    reorderFormValue: string;
-}
-
-const Spinner = () => {
-    return <MaterialSpinner size={24} spinnerColor={"#fa5723"} spinnerWidth={2} visible />;
-};
-
-interface RenderOptionsParams
-    extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
-    options: AutoCompleteProps["options"];
-    unique: boolean;
-}
-
-interface OptionsListProps {
-    getMenuProps: PropGetters<Record<string, any>>["getMenuProps"];
-    children: React.ReactNode;
-}
-
-interface AssignedValueAfterClearing {
-    set: boolean;
-    selection: string | null;
-}
-
-const OptionsList = ({ getMenuProps, children }: OptionsListProps) => {
-    return (
-        <Elevation z={1}>
-            <ul
-                className={classNames("multi-autocomplete__options-list", listStyles)}
-                {...getMenuProps()}
-            >
-                {children}
-            </ul>
-        </Elevation>
-    );
-};
-
-export class MultiAutoComplete extends React.Component<
-    MultiAutoCompleteProps,
-    MultiAutoCompleteState
-> {
-    static defaultProps: Partial<MultiAutoCompleteProps> = {
-        valueProp: "id",
-        textProp: "name",
-        unique: true,
-        options: [],
-        useSimpleValues: false,
-        useMultipleSelectionList: false,
-        /**
-         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderItem(item: any) {
-            return (
-                <Typography use={"body2"}>
-                    {getOptionText(item, (this as unknown as MultiAutoComplete).props)}
-                </Typography>
-            );
-        },
-        /**
-         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
-         */
-        renderListItemLabel(item: any) {
-            return getOptionText(item, (this as unknown as MultiAutoComplete).props);
-        }
-    };
-
-    public override state: MultiAutoCompleteState = {
-        inputValue: "",
-        multipleSelectionPage: 0,
-        multipleSelectionSearch: "",
-        reorderFormVisible: "",
-        reorderFormValue: ""
-    };
 
     /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     * Indicates if the reset action should be displayed.
      */
-    private downshift = React.createRef<any>();
-
-    private assignedValueAfterClearing: AssignedValueAfterClearing = {
-        set: false,
-        selection: null
-    };
-
-    setMultipleSelectionPage = (multipleSelectionPage: number): void => {
-        this.setState({ multipleSelectionPage });
-    };
-
-    setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {
-        this.setState({ multipleSelectionSearch });
-    };
-
-    getOptions() {
-        const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;
-
-        const values = Array.isArray(value) ? [...value] : [];
-
-        const filtered = [...options];
+    displayResetAction?: boolean;
+}
 
-        // If free input is allowed, prepend typed value to the list.
-        if (allowFreeInput && this.state.inputValue) {
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const MultiAutoComplete = ({
+    onChange,
+    value = [],
+    valueProp = "id",
+    textProp = "name",
+    renderItem,
+    noResultFound,
+    useSimpleValues,
+    loading,
+    allowFreeInput,
+    unique = true,
+    renderMultipleSelection,
+    ...props
+}: MultiAutoCompleteProps) => {
+    const options = useMemo(() => {
+        return props.options.map(option => {
             if (useSimpleValues) {
-                const existingValue = filtered.includes(this.state.inputValue);
-                if (!existingValue) {
-                    filtered.unshift(this.state.inputValue);
-                }
-            } else {
-                const existingValue = filtered.find(
-                    item => this.state.inputValue === getOptionText(item, this.props)
-                );
-                if (!existingValue) {
-                    filtered.unshift({ [this.props.textProp]: this.state.inputValue });
-                }
-            }
-        }
-
-        return filtered.filter(item => {
-            // We need to filter received options.
-            // 1) If "unique" prop was passed, we don't want to show already picked options again.
-            if (unique) {
-                if (Array.isArray(values)) {
-                    if (
-                        values.find(
-                            value =>
-                                getOptionValue(value, this.props) ===
-                                getOptionValue(item, this.props)
-                        )
-                    ) {
-                        return false;
-                    }
-                }
-            }
-
-            // 2) At the end, we want to show only options that are matched by typed text.
-            if (!this.state.inputValue) {
-                return true;
-            }
-
-            if (item.aliases) {
-                return findInAliases(item, this.state.inputValue);
+                return {
+                    label: option,
+                    value: option,
+                    item: option
+                };
             }
 
-            return getOptionText(item, this.props)
-                .toLowerCase()
-                .includes(this.state.inputValue.toLowerCase());
+            return {
+                label: option[textProp],
+                value: option[valueProp],
+                disabled: option.disabled,
+                item: option
+            };
         });
-    }
+    }, [props.options, textProp, valueProp, useSimpleValues]);
 
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-    private renderOptions(params: RenderOptionsParams) {
-        const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;
-        if (!isOpen) {
-            return null;
-        }
-
-        /**
-         * Suggest user to start typing when there are no options available to choose from.
-         */
-        if (!this.state.inputValue && !options.length) {
-            return (
-                <OptionsList getMenuProps={getMenuProps}>
-                    <li>
-                        <Typography use={"body2"}>Start typing to find entry</Typography>
-                    </li>
-                </OptionsList>
-            );
-        }
-
-        if (!options.length) {
-            return (
-                <Elevation z={1}>
-                    <ul
-                        className={classNames("multi-autocomplete__options-list", listStyles)}
-                        {...getMenuProps()}
-                    >
-                        <li>
-                            <Typography use={"body2"}>No results.</Typography>
-                            {this.props.noResultFound}
-                        </li>
-                    </ul>
-                </Elevation>
-            );
-        }
-
-        const { renderItem } = this.props;
-        return (
-            <Elevation z={1}>
-                <ul
-                    className={classNames("multi-autocomplete__options-list", listStyles)}
-                    {...getMenuProps()}
-                >
-                    {options.map((item, index) => {
-                        const itemValue = getOptionValue(item, this.props);
-
-                        // Base classes.
-                        const itemClassNames = {
-                            [suggestionList]: true,
-                            highlighted: highlightedIndex === index,
-                            selected: false
-                        };
-
-                        // Render the item.
-                        return (
-                            <li
-                                key={itemValue + index}
-                                {...getItemProps({
-                                    index,
-                                    item,
-                                    className: classNames(itemClassNames)
-                                })}
-                            >
-                                {renderItem.call(this, item, index)}
-                            </li>
-                        );
-                    })}
-                </ul>
-            </Elevation>
-        );
-    }
-
-    paginateMultipleSelection() {
-        const { value } = this.props;
-        const limit = 10;
-        let page = this.state.multipleSelectionPage;
-        const search = this.state.multipleSelectionSearch;
-
-        // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
-        let data = Array.isArray(value)
-            ? value.map((option, index) => {
-                  return { option, index };
-              })
-            : [];
-
-        if (search) {
-            data = data.filter(item => {
-                return getOptionText(item.option, this.props)
-                    .toLowerCase()
-                    .includes(search.toLowerCase());
-            });
-        }
-
-        const lastPage = Math.ceil(data.length / limit);
-        const totalCount = data.length;
-
-        page = page || lastPage;
-        data = data.slice((page - 1) * limit, page * limit);
-
-        let from = 0;
-        let to = 0;
-        if (data.length) {
-            from = (page - 1) * limit + 1;
-            to = from + (data.length - 1);
-        }
-
-        const meta = {
-            hasData: data.length > 0,
-            totalCount,
-            from,
-            to,
-            page: page,
-            lastPage,
-            limit,
-            hasPrevious: page > 1,
-            hasNext: page < lastPage
-        };
-
-        return { data, meta };
-    }
-
-    /**
-     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
-     * rendering selected items (we are using already existing "Chips" component).
-     */
-    public renderMultipleSelection() {
-        const {
-            value,
-            onChange,
-            disabled,
-            useMultipleSelectionList,
-            description,
-            renderListItemLabel,
-            renderMultipleSelection,
-            renderListItemOptions
-        } = this.props;
-
-        if (renderMultipleSelection !== undefined) {
-            if (renderMultipleSelection === null) {
-                return null;
-            }
-
-            return renderMultipleSelection.call(this, this.props);
-        }
-
-        if (useMultipleSelectionList) {
-            const { data, meta } = this.paginateMultipleSelection();
-
-            return (
-                <>
-                    <div className={style.pagination.bar}>
-                        <div>
-                            <Input
-                                className={style.pagination.searchInput}
-                                placeholder={"Search selected..."}
-                                value={this.state.multipleSelectionSearch}
-                                data-testid="pb.pagination.search"
-                                onChange={value => {
-                                    this.setMultipleSelectionSearch(value);
-                                    this.setMultipleSelectionPage(value ? 1 : 0);
-                                }}
-                            />
-                        </div>
-
-                        <div className={style.pagination.pages}>
-                            <div className={meta.hasData ? "" : style.pagination.secondaryText}>
-                                {meta.from} - {meta.to} of {meta.totalCount}
-                            </div>
-                            <div>
-                                <IconButton
-                                    icon={<PrevAllIcon />}
-                                    disabled={!meta.hasData || meta.page === 1}
-                                    onClick={() => this.setMultipleSelectionPage(1)}
-                                />
-                                <IconButton
-                                    icon={<PrevIcon />}
-                                    disabled={!meta.hasData || !meta.hasPrevious}
-                                    onClick={() => this.setMultipleSelectionPage(meta.page - 1)}
-                                />
-                                <IconButton
-                                    icon={<NextIcon />}
-                                    disabled={!meta.hasData || !meta.hasNext}
-                                    onClick={() => this.setMultipleSelectionPage(meta.page + 1)}
-                                />
-                                <IconButton
-                                    icon={<NextAllIcon />}
-                                    disabled={!meta.hasData || meta.page === meta.lastPage}
-                                    onClick={() => this.setMultipleSelectionPage(meta.lastPage)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <List className={style.pagination.list}>
-                        {meta.hasData ? (
-                            data.map((item, index) => {
-                                const key = `${getOptionValue(item.option, this.props)}-${index}`;
-                                if (this.state.reorderFormVisible === key) {
-                                    return (
-                                        <ListItem key={key}>
-                                            <ListItemGraphic>
-                                                <IconButton disabled icon={<ReorderIcon />} />
-                                            </ListItemGraphic>
-                                            <Input
-                                                value={this.state.reorderFormValue}
-                                                data-testid="pb.pagination.input"
-                                                onKeyDown={(e: any) => {
-                                                    const key = e.key;
-                                                    if (key !== "Escape" && key !== "Enter") {
-                                                        return;
-                                                    }
-
-                                                    if (key === "Enter") {
-                                                        // Reorder the item.
-                                                        const newValue = [
-                                                            ...(value as SelectionItem[])
-                                                        ];
-                                                        newValue.splice(
-                                                            e.target.value - 1,
-                                                            0,
-                                                            newValue.splice(item.index, 1)[0]
-                                                        );
+    const values = useMemo(() => {
+        return value
+            .map((val: SelectionItem | string) => {
+                if (typeof val === "string") {
+                    return val;
+                }
 
-                                                        if (onChange) {
-                                                            onChange(newValue);
-                                                        }
-                                                    }
+                return val[valueProp as keyof SelectionItem] as string;
+            })
+            .filter(Boolean);
+    }, [value, valueProp]);
 
-                                                    this.setState({
-                                                        reorderFormVisible: "",
-                                                        reorderFormValue: ""
-                                                    });
-                                                }}
-                                                onChange={value =>
-                                                    this.setState({ reorderFormValue: value })
-                                                }
-                                                type={"number"}
-                                                autoFocus
-                                                className={style.pagination.searchInput}
-                                                placeholder={
-                                                    "Type a new order number and press Enter, or press Esc to cancel."
-                                                }
-                                            />
-                                            <ListItemMeta>
-                                                <IconButton icon={<DeleteIcon />} disabled />
-                                            </ListItemMeta>
-                                        </ListItem>
-                                    );
-                                }
+    const onValuesChange = useCallback(
+        (values: any) => {
+            const selectedOptions = options.filter(option => values.includes(option.value));
+            const selectedItems = selectedOptions.map(option => option.item);
 
-                                return (
-                                    <ListItem key={key}>
-                                        <ListItemGraphic>
-                                            <IconButton
-                                                icon={<ReorderIcon />}
-                                                onClick={() => {
-                                                    this.setState({ reorderFormVisible: key });
-                                                }}
-                                            />
-                                        </ListItemGraphic>
-                                        <div
-                                            style={{
-                                                color: "var(--mdc-theme-text-secondary-on-background)",
-                                                marginRight: 8,
-                                                minWidth: 32
-                                            }}
-                                        >
-                                            {item.index + 1}.
-                                        </div>{" "}
-                                        {renderListItemLabel &&
-                                            renderListItemLabel.call(this, item.option)}
-                                        <ListItemMeta className={listItemMetaClassName}>
-                                            {renderListItemOptions &&
-                                                renderListItemOptions.call(this, item.option)}
-                                            <IconButton
-                                                icon={<DeleteIcon />}
-                                                className={iconButtonClassName}
-                                                onClick={() => {
-                                                    if (!onChange) {
-                                                        return;
-                                                    }
-                                                    onChange([
-                                                        ...(value as SelectionItem[]).slice(
-                                                            0,
-                                                            item.index
-                                                        ),
-                                                        ...(value as SelectionItem[]).slice(
-                                                            item.index + 1
-                                                        )
-                                                    ]);
-                                                }}
-                                            />
-                                        </ListItemMeta>
-                                    </ListItem>
-                                );
-                            })
-                        ) : (
-                            <ListItem>
-                                <span className={style.pagination.secondaryText}>
-                                    Nothing to show.
-                                </span>
-                            </ListItem>
-                        )}
-                    </List>
-                    <div>
-                        <FormElementMessage>{description}</FormElementMessage>
-                    </div>
-                </>
-            );
-        }
+            onChange?.(selectedItems);
+        },
+        [onChange, options]
+    );
 
-        const hasItems = Array.isArray(value) && value.length;
-        if (!hasItems) {
-            return null;
+    const selectedOptionRenderer = useMemo(() => {
+        if (renderMultipleSelection === null) {
+            return () => null;
         }
+        return renderMultipleSelection;
+    }, [renderMultipleSelection]);
 
-        return (
-            <Chips disabled={disabled}>
-                {(value as SelectionItem[]).map((item, index) => (
-                    <Chip
-                        label={getOptionText(item, this.props)}
-                        key={`${getOptionValue(item, this.props)}-${index}`}
-                        trailingIcon={<BaselineCloseIcon />}
-                        onRemove={() => {
-                            if (!onChange) {
-                                return;
-                            }
-                            onChange([
-                                ...(value as SelectionItem[]).slice(0, index),
-                                ...(value as SelectionItem[]).slice(index + 1)
-                            ]);
-                        }}
-                    />
-                ))}
-            </Chips>
-        );
-    }
-
-    public override render() {
-        const {
-            props,
-            props: {
-                // options: rawOptions,
-                // allowFreeInput,
-                // useSimpleValues,
-                unique,
-                value,
-                onChange,
-                // valueProp,
-                // textProp,
-                onInput,
-                validation = { isValid: null, message: null },
-                useMultipleSelectionList,
-                description,
-                ...otherInputProps
-            }
-        } = this;
-
-        const options = this.getOptions();
-
-        return (
-            <div className={classNames(autoCompleteStyle, props.className)}>
-                <Downshift
-                    defaultSelectedItem={null}
-                    // @ts-expect-error there is no className on Downshift
-                    className={autoCompleteStyle}
-                    itemToString={item => item && getOptionText(item, props)}
-                    ref={this.downshift}
-                    onChange={selection => {
-                        if (!this.assignedValueAfterClearing.set) {
-                            this.assignedValueAfterClearing = {
-                                set: true,
-                                selection
-                            };
-                            this.downshift.current.clearSelection();
-                            this.setMultipleSelectionPage(0);
-                            return;
-                        }
-
-                        if (this.assignedValueAfterClearing.set) {
-                            this.setState({ inputValue: "" });
-                            this.assignedValueAfterClearing.set = false;
-                            if (Array.isArray(value)) {
-                                onChange &&
-                                    onChange([...value, this.assignedValueAfterClearing.selection]);
-                            } else {
-                                onChange && onChange([this.assignedValueAfterClearing.selection]);
-                            }
-                        }
-                    }}
-                >
-                    {/* "getInputProps" and "openMenu" are not needed in renderOptions method. */}
-                    {({ getInputProps, openMenu, ...rest }) => (
-                        <div>
-                            <Input
-                                {...getInputProps({
-                                    ...otherInputProps,
-                                    // @ts-expect-error
-                                    validation,
-
-                                    // Only pass description if not using "useMultipleSelectionList".
-                                    description: useMultipleSelectionList ? null : description,
-                                    rawOnChange: true,
-                                    trailingIcon: this.props.loading && <Spinner />,
-                                    onChange: e => e,
-                                    onBlur: e => e,
-                                    onKeyUp: (e: any) => {
-                                        const inputValue = e.target.value || "";
-
-                                        // Set current input value into state and trigger onInput if different.
-                                        if (inputValue !== this.state.inputValue) {
-                                            this.setState({ inputValue }, () => {
-                                                onInput && onInput(inputValue);
-                                            });
-                                        }
-                                    },
-                                    onFocus: e => {
-                                        openMenu();
-                                        otherInputProps.onFocus && otherInputProps.onFocus(e);
-                                    }
-                                })}
-                            />
-                            {this.renderOptions({ ...rest, unique, options })}
-                            {this.renderMultipleSelection()}
-                        </div>
-                    )}
-                </Downshift>
-            </div>
-        );
-    }
-}
+    return (
+        <>
+            <AdminMultiAutoComplete
+                {...props}
+                size={"lg"}
+                values={values}
+                options={options}
+                optionRenderer={renderItem}
+                selectedOptionRenderer={selectedOptionRenderer}
+                emptyMessage={noResultFound}
+                onValuesChange={onValuesChange}
+                isLoading={loading}
+                allowFreeInput={allowFreeInput}
+                uniqueValues={unique}
+            />
+        </>
+    );
+};
diff --git a/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md b/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md
deleted file mode 100644
index 8d9b298ca7a..00000000000
--- a/packages/ui/src/AutoComplete/MultiAutoCompleteReadme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# MultiAutoComplete
-
-### Description
-
-`MultiAutoComplete` component lets users select multiple values from a list of suggestions (created based on their input).
-
-### Import
-
-```js
-import { MultiAutoComplete } from "@webiny/ui/MultiAutoComplete";
-```
diff --git a/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg b/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg
deleted file mode 100644
index eb1ae606077..00000000000
--- a/packages/ui/src/AutoComplete/icons/baseline-close-24px.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
diff --git a/packages/ui/src/AutoComplete/icons/delete.svg b/packages/ui/src/AutoComplete/icons/delete.svg
deleted file mode 100644
index d5ec271650b..00000000000
--- a/packages/ui/src/AutoComplete/icons/delete.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5">
-	</g>
-	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
-		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
-		v0C19,4.45,18.55,4,18,4z"/>
-</g>
-</svg>
diff --git a/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg b/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg
deleted file mode 100644
index d656abf83f1..00000000000
--- a/packages/ui/src/AutoComplete/icons/navigate_before-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.91 6.71c-.39-.39-1.02-.39-1.41 0L8.91 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L11.03 12l3.88-3.88c.38-.39.38-1.03 0-1.41z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg b/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg
deleted file mode 100644
index 6badba091b7..00000000000
--- a/packages/ui/src/AutoComplete/icons/navigate_next-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.31 6.71c-.39.39-.39 1.02 0 1.41L13.19 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg b/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg
deleted file mode 100644
index afe7dea9fc5..00000000000
--- a/packages/ui/src/AutoComplete/icons/reorder_black_24dp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/></svg>
diff --git a/packages/ui/src/AutoComplete/icons/skip_next-24px.svg b/packages/ui/src/AutoComplete/icons/skip_next-24px.svg
deleted file mode 100644
index 1ce626cb579..00000000000
--- a/packages/ui/src/AutoComplete/icons/skip_next-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg b/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg
deleted file mode 100644
index 1ffd92d231a..00000000000
--- a/packages/ui/src/AutoComplete/icons/skip_previous-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/AutoComplete/icons/spinner.svg b/packages/ui/src/AutoComplete/icons/spinner.svg
deleted file mode 100644
index 018b1538b6b..00000000000
--- a/packages/ui/src/AutoComplete/icons/spinner.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-</svg>
diff --git a/packages/ui/src/AutoComplete/styles.ts b/packages/ui/src/AutoComplete/styles.ts
deleted file mode 100644
index 6879deca1ef..00000000000
--- a/packages/ui/src/AutoComplete/styles.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { css } from "emotion";
-
-export const autoCompleteStyle = css({
-    position: "relative",
-    ".mdc-elevation--z1": {
-        position: "absolute",
-        width: "calc(100% - 2px)",
-        left: 1,
-        top: 56,
-        zIndex: 10,
-        maxHeight: 200,
-        overflowY: "scroll",
-        backgroundColor: "var(--mdc-theme-surface)"
-    },
-    ul: {
-        listStyle: "none",
-        width: "100%",
-        padding: 0,
-        li: {
-            padding: 10,
-            cursor: "pointer",
-            span: {
-                color: "var(--mdc-theme-on-surface)"
-            }
-        }
-    },
-    "&.webiny-ui-autocomplete--size-medium": {
-        ".mdc-elevation--z1": {
-            top: 40
-        },
-        ul: {
-            li: {
-                padding: 8
-            }
-        }
-    },
-    "&.webiny-ui-autocomplete--size-small": {
-        ".mdc-elevation--z1": {
-            top: 30
-        },
-        ul: {
-            li: {
-                padding: 5
-            }
-        }
-    }
-});
-
-export const suggestionList = css({
-    fontWeight: "normal",
-    backgroundColor: "var(--mdc-theme-surface)",
-    transition: "background-color 0.2s",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&.selected": {
-        fontWeight: "bold"
-    },
-    "&.highlighted": {
-        backgroundColor: "var(--mdc-theme-on-background)"
-    }
-});
diff --git a/packages/ui/src/AutoComplete/types.ts b/packages/ui/src/AutoComplete/types.ts
index dbd80d9041a..057a40a5691 100644
--- a/packages/ui/src/AutoComplete/types.ts
+++ b/packages/ui/src/AutoComplete/types.ts
@@ -45,12 +45,12 @@ export interface AutoCompleteBaseProps extends FormComponentProps {
     /**
      * Key in a single option object that will be used as option's value (by default, "id" key will be used).
      */
-    valueProp: string;
+    valueProp?: string;
 
     /**
      * Key in a single option object that will be used as option's text (by default, "name" key will be used).
      */
-    textProp: string;
+    textProp?: string;
 
     /**
      * Callback that gets executed on change of input value.
@@ -70,5 +70,5 @@ export interface AutoCompleteBaseProps extends FormComponentProps {
     /**
      * Renders a single suggestion item.
      */
-    renderItem: (item: any, index?: number) => React.ReactNode;
+    renderItem?: (item: any, index?: number) => React.ReactNode;
 }
diff --git a/packages/ui/src/AutoComplete/utils.ts b/packages/ui/src/AutoComplete/utils.ts
deleted file mode 100644
index 5b7cbdfb1f7..00000000000
--- a/packages/ui/src/AutoComplete/utils.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-interface Option {
-    aliases?: string[];
-    index?: number;
-    name?: string;
-    [key: string]: any;
-}
-interface Props {
-    useSimpleValues?: boolean;
-    valueProp?: string;
-    textProp?: string;
-}
-
-export const getOptionValue = (option: Option | string, props: Props): string => {
-    if (option) {
-        return props.useSimpleValues
-            ? (option as string)
-            : (option as Option)[props.valueProp as string];
-    }
-
-    return option as string;
-};
-
-export const getOptionText = (option: Option | string, props: Props): string => {
-    if (option) {
-        return props.useSimpleValues
-            ? (option as string)
-            : (option as Option)[props.textProp as string];
-    }
-
-    return option as string;
-};
-
-export const findInAliases = (option: Option, search?: string): boolean => {
-    return (option.aliases || []).some((alias: string): boolean => {
-        return alias.toLowerCase().includes((search || "").toLowerCase());
-    });
-};
diff --git a/packages/ui/src/Input/Input.tsx b/packages/ui/src/Input/Input.tsx
index c527436e1c1..d29bbb5389f 100644
--- a/packages/ui/src/Input/Input.tsx
+++ b/packages/ui/src/Input/Input.tsx
@@ -166,6 +166,7 @@ export const Input = (props: InputProps) => {
         trailingIcon,
         onEnter,
         required,
+        inputRef,
         ...rest
     } = props;
 
@@ -224,6 +225,7 @@ export const Input = (props: InputProps) => {
                 note={description}
                 required={required}
                 rows={rows}
+                textareaRef={inputRef as React.Ref<HTMLTextAreaElement> | undefined}
             />
         );
     }
@@ -245,6 +247,7 @@ export const Input = (props: InputProps) => {
             validation={validation}
             note={description}
             required={required}
+            inputRef={inputRef as React.Ref<HTMLInputElement> | undefined}
         />
     );
 };
diff --git a/packages/ui/src/styles.scss b/packages/ui/src/styles.scss
index 09db25cb88c..f41fcc64259 100644
--- a/packages/ui/src/styles.scss
+++ b/packages/ui/src/styles.scss
@@ -11,7 +11,7 @@ $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
 $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
 $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 $webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-$webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-font-family: "inherit" !default;
 $webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 $mdc-theme-primary: $webiny-theme-light-primary;
@@ -28,16 +28,4 @@ $mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
 $mdc-typography-font-family: $webiny-theme-typography-font-family;
 
 @import "material-components-web/material-components-web.scss";
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700|Material+Icons");
-
-/*
-Fix for select box appearance. For some reason browser prefix css attributes are striped away.
- */
-.mdc-select__native-control {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-.mdc-select--box .mdc-select__native-control {
-  padding-top: 10px;
-}
+//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700|Material+Icons");
diff --git a/yarn.lock b/yarn.lock
index 83b38b3e538..0f52185306a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8871,6 +8871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/primitive@npm:1.1.1"
+  checksum: 10/d7e819177590108b74139809d52ec043c0962ae3513e947998be575fb13639c5c1c091896ddcf1d6a22a777d44ade59d22c2019ce9099607fc62a5de09c59707
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-accessible-icon@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-accessible-icon@npm:1.1.0"
@@ -8929,6 +8936,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-arrow@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-arrow@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c75505c2858cffff7c742e888b635879f9a6d95e08bf5ae939be33f97e1171379bc6b5354ec0cd3d12624bdbe5a830ee6aa0fb1f46b1af160b488bc54e64d486
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-avatar@npm:^1.1.0":
   version: 1.1.1
   resolution: "@radix-ui/react-avatar@npm:1.1.1"
@@ -9050,6 +9076,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1be82f9f7fab96cc10f167a2e4f976e0135a63d473334f664c06f02af13bc5ea1994cb0505f89ed190d756cb65d57506721c030908af07e49b9e3cfd36044f33
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-context@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-context@npm:1.0.1"
@@ -9091,6 +9130,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dialog@npm:^1.1.2":
+  version: 1.1.4
+  resolution: "@radix-ui/react-dialog@npm:1.1.4"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.3"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-portal": "npm:1.1.3"
+    "@radix-ui/react-presence": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-slot": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:^2.6.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/61edc875340a6e89228d9a42403456b2351e6c12e316bc372dfde1e616464f29d91cfed8cbda03fde634ef5b3d2046195173b20e623888ddf8316dd433aab28a
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-direction@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-direction@npm:1.0.1"
@@ -9189,6 +9260,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dismissable-layer@npm:1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.1.3"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-escape-keydown": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/9905ff3d8d630223fd40bf31cdd8027b6e750cecd31aa04c2a5912e6e628f72973e58032bb944a5f4685dd888256a306a1c296a6e18648187974455a9660d95f
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dropdown-menu@npm:^2.1.2":
   version: 2.1.2
   resolution: "@radix-ui/react-dropdown-menu@npm:2.1.2"
@@ -9285,6 +9379,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-focus-scope@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/128508e7e34a47fd44d51bdb3d66a35a337c54b64125548d4a98bb377ee89b2fd8f96e0a075368d393c6664abba1e5a2f167734a6adbb170c41da0aa7a06d05f
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-id@npm:1.0.1"
@@ -9301,7 +9416,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-id@npm:1.1.0":
+"@radix-ui/react-id@npm:1.1.0, @radix-ui/react-id@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-id@npm:1.1.0"
   dependencies:
@@ -9371,6 +9486,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popover@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-popover@npm:1.1.4"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.3"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.1"
+    "@radix-ui/react-portal": "npm:1.1.3"
+    "@radix-ui/react-presence": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-slot": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:^2.6.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/8f21bc61a752291319f64327fa9b2b310c93efe55bb6e0fec7d72a4d59e1e80b28a25ad13c3b9ac600bc0c0e68f155f2226ef76c54d9e8226b4066b70611a4f3
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-popper@npm:1.1.2"
@@ -9428,6 +9576,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popper@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@radix-ui/react-popper@npm:1.2.1"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@radix-ui/react-arrow": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-rect": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+    "@radix-ui/rect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/423506c2f862c3ee69956bdef3de668bf189b1ec4496c83bef01c3a962c88ab44f9154523afdcd4f0ed6a06eeb44005fcfca4ee0d68267187f58df1f65781b3c
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-portal@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-portal@npm:1.0.3"
@@ -9488,6 +9664,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-portal@npm:1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/react-portal@npm:1.1.3"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/470fb50c940772d05cc268e219b3d15848909dcd0a2dc1952965d0af905992f0ccab99e99c490dea6564c441397eba720b8425ba9f4582c94bef40ebe27ac0d0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-presence@npm:1.1.0"
@@ -9528,6 +9724,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-presence@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-presence@npm:1.1.2"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/b7c7a1eed6e2a4b8778f37d925bca12fccb2a3fdd48fa854cb3d6308592aec7253b0a193cba65b8c323e14a14119935434e8f6d9bdc0fbf97450c0da1b4eb0f9
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-primitive@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-primitive@npm:1.0.3"
@@ -9567,6 +9783,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:2.0.1, @radix-ui/react-primitive@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "@radix-ui/react-primitive@npm:2.0.1"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/ed6829b8ff4117cde2c02b14325ff78b7902fe9e8324b9fdbfd11646c5bb703f38711d8da5029ffc873384496481b7d398d0e3c17f7cc287b52fb92fbaf67da2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-radio-group@npm:^1.2.1":
   version: 1.2.1
   resolution: "@radix-ui/react-radio-group@npm:1.2.1"
@@ -9780,6 +10015,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-slot@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5b1ee5100da356c8f9f56cd7ca273838a373fa3808f0f909b1e132c4f734282571cb666e86a548831ee82a62240e126d43379994285a9b030fd34ea43538b5e2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-switch@npm:^1.1.0":
   version: 1.1.1
   resolution: "@radix-ui/react-switch@npm:1.1.1"
@@ -14977,6 +15227,7 @@ __metadata:
     "@radix-ui/react-checkbox": "npm:^1.1.2"
     "@radix-ui/react-dropdown-menu": "npm:^2.1.2"
     "@radix-ui/react-label": "npm:^2.1.0"
+    "@radix-ui/react-popover": "npm:^1.1.4"
     "@radix-ui/react-radio-group": "npm:^1.2.1"
     "@radix-ui/react-select": "npm:^2.1.2"
     "@radix-ui/react-separator": "npm:^1.1.0"
@@ -15002,6 +15253,7 @@ __metadata:
     chalk: "npm:^4.1.0"
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.1"
+    cmdk: "npm:^1.0.4"
     css-loader: "npm:^6.10.0"
     file-loader: "npm:6.2.0"
     mobx: "npm:^6.9.0"
@@ -19342,7 +19594,6 @@ __metadata:
     classnames: "npm:^2.5.1"
     cropperjs: "npm:^1.4.3"
     dot-prop-immutable: "npm:^2.1.1"
-    downshift: "npm:^2.1.5"
     emotion: "npm:10.0.27"
     execa: "npm:^5.1.1"
     keycode: "npm:^2.2.0"
@@ -19358,7 +19609,6 @@ __metadata:
     react-columned: "npm:^1.1.3"
     react-custom-scrollbars: "npm:^4.2.1"
     react-loading-skeleton: "npm:^3.1.0"
-    react-spinner-material: "npm:1.1.4"
     react-transition-group: "npm:^4.4.5"
     rimraf: "npm:^6.0.1"
     timeago-react: "npm:^3.0.6"
@@ -23018,6 +23268,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "cmdk@npm:1.0.4"
+  dependencies:
+    "@radix-ui/react-dialog": "npm:^1.1.2"
+    "@radix-ui/react-id": "npm:^1.1.0"
+    "@radix-ui/react-primitive": "npm:^2.0.0"
+    use-sync-external-store: "npm:^1.2.2"
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  checksum: 10/768e7c78c09a97b626e53893af2bba9cb1544cf060a9a0822483eb12bbea64b221da1a9022f8397a376ee98a0789110d098965ae2d21a3d81194cfd2a4c0bafa
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -38927,6 +39192,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.7":
+  version: 2.3.8
+  resolution: "react-remove-scroll-bar@npm:2.3.8"
+  dependencies:
+    react-style-singleton: "npm:^2.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6c0f8cff98b9f49a4ee2263f1eedf12926dced5ce220fbe83bd93544460e2a7ec8ec39b35d1b2a75d2fced0b2d64afeb8e66f830431ca896e05a20585f9fc350
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll@npm:2.5.5":
   version: 2.5.5
   resolution: "react-remove-scroll@npm:2.5.5"
@@ -38965,6 +39246,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:^2.6.1":
+  version: 2.6.2
+  resolution: "react-remove-scroll@npm:2.6.2"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.7"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.3"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/e6d7e8c42793ae24c9d4a6cb3ebdf3499c1b413fb0c93c3fbf047d875396e944e88a0520dd7db3a20db37125ffadef45b1ce8cb77b74da44daf47c5eb2155c9a
+  languageName: node
+  linkType: hard
+
 "react-resizable-panels@npm:^2.0.19":
   version: 2.0.19
   resolution: "react-resizable-panels@npm:2.0.19"
@@ -39059,6 +39359,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.2":
+  version: 2.2.3
+  resolution: "react-style-singleton@npm:2.2.3"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/62498094ff3877a37f351b29e6cad9e38b2eb1ac3c0cb27ebf80aee96554f80b35e17bdb552bcd7ac8b7cb9904fea93ea5668f2057c73d38f90b5d46bb9b27ab
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:2":
   version: 2.9.0
   resolution: "react-transition-group@npm:2.9.0"
@@ -43914,6 +44230,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "use-callback-ref@npm:1.3.3"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/adf06a7b6a27d3651c325ac9b66d2b82ccacaed7450b85b211d123e91d9a23cb5a587fcc6db5b4fd07ac7233e5abf024d30cf02ddc2ec46bca712151c0836151
+  languageName: node
+  linkType: hard
+
 "use-deep-compare-effect@npm:^1.6.1":
   version: 1.8.1
   resolution: "use-deep-compare-effect@npm:1.8.1"
@@ -43954,6 +44285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.2":
+  version: 1.4.0
+  resolution: "use-sync-external-store@npm:1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/08bf581a8a2effaefc355e9d18ed025d436230f4cc973db2f593166df357cf63e47b9097b6e5089b594758bde322e1737754ad64905e030d70f8ff7ee671fd01
+  languageName: node
+  linkType: hard
+
 "utf8-byte-length@npm:^1.0.1":
   version: 1.0.4
   resolution: "utf8-byte-length@npm:1.0.4"