Action bar 🚧

<Box layerStyle="actionBar">
    <HStack>
        <Tooltip label="Cancel">
            <IconButton
                variant="ghost"
                colorScheme="neutralInverse"
                icon={
                    <Icon>
                        <path d={mdiClose} />
                    </Icon>
                }
                aria-label={'Cancel'}
            />
        </Tooltip>
        <Text color="chakra-inverse-text" fontWeight="medium">
            3 selected
        </Text>
    </HStack>
    <ButtonGroup variant="ghost" colorScheme="neutralInverse">
        <Show above="sm">
            <Button
                leftIcon={
                    <Icon>
                        <path d={mdiCloudUploadOutline} />
                    </Icon>
                }
            >
                Publish
            </Button>
            <Button
                leftIcon={
                    <Icon>
                        <path d={mdiCloudOffOutline} />
                    </Icon>
                }
            >
                Unpublish
            </Button>
            <Button
                leftIcon={
                    <Icon>
                        <path d={mdiContentCopy} />
                    </Icon>
                }
            >
                Duplicate
            </Button>
        </Show>
        <Show below="sm">
            <Tooltip label="Publish">
                <IconButton
                    icon={
                        <Icon>
                            <path d={mdiCloudUploadOutline} />
                        </Icon>
                    }
                    aria-label={'Publish'}
                />
            </Tooltip>
            <Tooltip label="Unpublish">
                <IconButton
                    icon={
                        <Icon>
                            <path d={mdiCloudOffOutline} />
                        </Icon>
                    }
                    aria-label={'Unpublish'}
                />
            </Tooltip>
            <Tooltip label="Duplicate">
                <IconButton
                    icon={
                        <Icon>
                            <path d={mdiContentCopy} />
                        </Icon>
                    }
                    aria-label={'Duplicate'}
                />
            </Tooltip>
        </Show>
        <Menu>
            <Tooltip label="More">
                <MenuButton
                    as={IconButton}
                    icon={
                        <Icon>
                            <path d={mdiDotsHorizontal} />
                        </Icon>
                    }
                    aria-label={'More'}
                />
            </Tooltip>
            <MenuList>
                <MenuItem
                    icon={
                        <Icon>
                            <path d={mdiArchiveOutline} />
                        </Icon>
                    }
                >
                    Archive
                </MenuItem>
                <MenuItem
                    icon={
                        <Icon>
                            <path d={mdiTrashCanOutline} />
                        </Icon>
                    }
                >
                    Delete
                </MenuItem>
            </MenuList>
        </Menu>
    </ButtonGroup>
</Box>