Filters 🚧

<Stack spacing="12">
<Wrap align="center">
    <InputGroup maxW="2xs">
        <InputLeftElement
            pointerEvents="none"
            children={
                <Icon>
                    <path d={mdiMagnify} />
                </Icon>
            }
        />
        <Input placeholder="Search" />
    </InputGroup>
    <ButtonGroup as={Wrap} variant="filter">
        <Button
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Project
        </Button>
        <Button
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Type
        </Button>
        <Button
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Status
        </Button>
        <Button size="md">Assigned to me</Button>
    </ButtonGroup>
</Wrap>
<HStack><Heading size="md">Active filters (simple design)</Heading>
<Badge colorScheme="success">Preferred</Badge></HStack>
<Wrap align="center">
    <InputGroup maxW="2xs">
        <InputLeftElement
            pointerEvents="none"
            children={
                <Icon>
                    <path d={mdiMagnify} />
                </Icon>
            }
        />
        <Input placeholder="Search" value="some text here" />
        <InputRightElement>
            <Tooltip label="Clear">
                <CloseButton />
            </Tooltip>
        </InputRightElement>
    </InputGroup>
    <ButtonGroup as={Wrap} variant="filter">
        <Button isActive rightIcon={<CloseButton mr="-2" />}>
            Project:
            <Text ml="1" fontWeight="normal">
                Blok, Content Hub ONE, Explorer, +2
            </Text>
        </Button>
        <Button isActive rightIcon={<CloseButton mr="-2" />}>
            Type:
            <Text ml="1" fontWeight="normal">
                Task
            </Text>
        </Button>
        <Button
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Status
        </Button>
        <Button isActive rightIcon={<CloseButton mr="-2" />}>
            Assigned to me
        </Button>
        <Button
            rightIcon={
                <Icon>
                    <path d={mdiPlus} />
                </Icon>
            }
        >
            More
        </Button>
        <Button variant="link" colorScheme="primary" px="2">
            Clear all
        </Button>
    </ButtonGroup>
</Wrap>
<Heading size="md">Active filters (complex design)</Heading>
<Wrap align="center">
    <InputGroup maxW="2xs">
        <InputLeftElement
            pointerEvents="none"
            children={
                <Icon>
                    <path d={mdiMagnify} />
                </Icon>
            }
        />
        <Input placeholder="Search" />
    </InputGroup>
    <ButtonGroup as={Wrap} variant="filter">
        <Button
            variant="filter"
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Project
            <HStack ml="4" spacing="1">
                <Tag colorScheme="primary" variant="subtle">
                    Blok
                    <TagCloseButton />
                </Tag>
                <Tag colorScheme="primary" variant="subtle">
                    Content Hub ONE
                    <TagCloseButton />
                </Tag>
                <Tag colorScheme="primary" variant="subtle">
                    Content Hub
                    <TagCloseButton />
                </Tag>
            </HStack>
        </Button>
        <Button
            variant="filter"
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Type
        </Button>
        <Button
            variant="filter"
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Status
        </Button>
        <Button
            variant="filter"
            rightIcon={
                <Icon>
                    <path d={mdiPlus} />
                </Icon>
            }
        >
            More
        </Button>
        <Button variant="link" colorScheme="primary" p="2">
            Clear all
        </Button>
    </ButtonGroup>
</Wrap>
</Stack>