ColorPicker

() => {
  const [color, setColor] = React.useState('#ffffff')
  return (
    <>
      {color}
      <ColorPicker
        onChange={color => setColor(color)}
      />
    </>
  )
}

() => {
  const [color, setColor] = React.useState('#c7c6f9')
  return (
    <ColorPicker
      onChange={color => setColor(color)}
      defaultColor={color}
    />
  )
}

() => {
  const [tempColor, setTempColor] = React.useState('#ffffff')
  const [finalColor, setFinalColor] = React.useState('#ffffff')
  return (
    <>
      Temp color: {tempColor}
      <br />
      Final color: {finalColor}
      <ColorPicker
        onChange={color => setTempColor(color)}
        confirmButton={
          <Button
            variant="primary"
            size="small"
            hasFullWidth
            onClick={() => setFinalColor(tempColor)}
          >
            Use this color
          </Button>
        }
      />
    </>
  )
}

() => {
  const [color, setColor] = React.useState('#ffffff')
  const swatchesArray = ['#ff623e', '#44c3c3', '#ffc55c', '#77c5ff', '#f8f6f0',
      '#6c6c7f', '#ffffff']
  return (
    <ColorPicker
      onChange={color => setColor(color)}
      swatches={swatchesArray}
    />
  )
}

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <Container width="max-content">
      <Popover
        isOpen={isOpen}
        placement="bottomCenter"
        content={(
          <ColorPicker onChange={color => (color)} />
        )}
      >
        <Button onClick={() => setOpen(!isOpen)}>
          Trigger
        </Button>
      </Popover>
    </Container>
  )
}