react-color-compact: Pass addonBefore and addonAfter props to react-compact

[kzroo]

The swatch component (react-color/packages/color-swatch), which react-color-compact uses under the hood, has addonBefore and addonAfter props, allowing you to pass custom content to the component.

For some reason, they were excluded from the react-color-compact component.
So I added them back in.

Now you can do something like this:

addonAfter={<ColorPickerCustom />}

(using tailwind:)

export default function ColorPickerCustom() {
    return (
        <div tabIndex={0}
            className="bg-linear-to-br/decreasing from-violet-700 via-lime-300 to-violet-700"
            style={{
                borderRadius: '2px',
                height: '1.25rem',
                width: '1.25rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                margin: '2px',
                border: '1px solid var(--color-border)',
                position: 'relative',
                outline: 'none',
            }} />
    );
}

I also added a className to the wrapper div around the editable input (prefixCls-input-wrapper, which defaults to w-color-compact-input-wrapper), so you can override the styles in your css. (By default the wrapper has a margin on it, so now you can change that.)