From aa9c55e12de1eba0ac417969c484ea68172d30e4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 17 Feb 2025 15:45:24 +0100
Subject: [PATCH 01/41] Organised CTA card settings panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref https://linear.app/ghost/issue/PLG-355/improve-cta-card-settings-panel
- Updated ButtonGroup styles.
- Added a button-style image upload placeholder to MediaPlaceholder. Also updated the VideoCard to follow the same style.
- Refactored ColorOptionButtons and ColorPicker to display swatches and colorpicker inside toolbar. This also affects the callout, signup and header cards and the image-background selector.
- Added pink and purple as background colors to the CTA card.
- Changed CTA card link styles to currentColor instead of accent color – both for the label and the body text.
---
 .../nodes/call-to-action/CallToActionNode.js  |   6 +-
 .../src/components/ui/ButtonGroup.jsx         |   4 +-
 .../src/components/ui/ColorOptionButtons.jsx  |  75 ++++++---
 .../src/components/ui/ColorPicker.jsx         | 142 +++++++++++++++---
 .../src/components/ui/MediaPlaceholder.jsx    | 125 ++++++++++++---
 .../src/components/ui/MediaUploader.jsx       |   3 +
 .../src/components/ui/SettingsPanel.jsx       |  45 +++---
 .../components/ui/cards/CallToActionCard.jsx  |  49 +++---
 .../src/components/ui/cards/CalloutCard.jsx   |  15 +-
 .../ui/cards/HeaderCard/v2/HeaderCard.jsx     |  58 +++----
 .../src/components/ui/cards/SignupCard.jsx    |  57 +++----
 .../src/components/ui/cards/VideoCard.jsx     |   3 +-
 .../src/styles/components/kg-prose.css        |   8 +
 packages/koenig-lexical/tailwind.config.cjs   |   1 +
 14 files changed, 412 insertions(+), 179 deletions(-)

diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
index 3a042fdce9..ee22c6b176 100644
--- a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
+++ b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
@@ -8,10 +8,10 @@ export class CallToActionNode extends generateDecoratorNode({
     properties: [
         {name: 'layout', default: 'minimal'},
         {name: 'textValue', default: '', wordCount: true},
-        {name: 'showButton', default: false},
-        {name: 'buttonText', default: ''},
+        {name: 'showButton', default: true},
+        {name: 'buttonText', default: 'Learn more'},
         {name: 'buttonUrl', default: ''},
-        {name: 'buttonColor', default: ''},
+        {name: 'buttonColor', default: 'black'},
         {name: 'buttonTextColor', default: ''},
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
index 3a2aee8352..ad95b6d4bb 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroup({buttons = [], selectedName, onClick}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly gap-[.6rem] rounded-lg font-sans text-md font-normal text-white">
+            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
                 {buttons.map(({label, name, Icon, dataTestId}) => (
                     <IconButton
                         key={`${name}-${label}`}
@@ -33,7 +33,7 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
         <li className="mb-0">
             <button
                 aria-label={label}
-                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-grey-150 dark:hover:bg-grey-900 ${isActive ? 'bg-grey-150 text-green-600 dark:bg-grey-900 dark:text-white' : 'text-black dark:text-white' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 type="button"
                 onClick={handleClick}
diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
index 595eda9aa8..1fa756cfc0 100644
--- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
@@ -1,31 +1,62 @@
 import PlusIcon from '../../assets/icons/plus.svg?react';
-import React from 'react';
+import React, {useState} from 'react';
 import {Tooltip} from './Tooltip';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const selectedButton = buttons.find(button => button.name === selectedName);
+
     return (
-        <div className="flex">
-            <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
-                {buttons.map(({label, name, color}) => (
-                    name !== 'image' ?
-                        <ColorButton
-                            key={`${name}-${label}`}
-                            color={color}
-                            label={label}
-                            name={name}
-                            selectedName={selectedName}
-                            onClick={onClick}
-                        />
-                        :
-                        <li key='background-image' className={`flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
-                            <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
-                                <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
-                            </span>
-                        </li>
+        <div className="relative">
+            <button
+                className={`relative size-6 cursor-pointer rounded-full ${selectedName ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {selectedName && (
+                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        WebkitMaskComposite: 'xor',
+                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        maskComposite: 'exclude'
+                    }} />
+                )}
+                <span
+                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white`}
+                ></span>
+            </button>
 
-                ))}
-            </ul>
+            {/* Color options popover */}
+            {isOpen && (
+                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow">
+                    <div className="flex">
+                        <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
+                            {buttons.map(({label, name, color}) => (
+                                name !== 'image' ?
+                                    <ColorButton
+                                        key={`${name}-${label}`}
+                                        color={color}
+                                        label={label}
+                                        name={name}
+                                        selectedName={selectedName}
+                                        onClick={(name) => {
+                                            onClick(name);
+                                            setIsOpen(false);
+                                        }}
+                                    />
+                                    :
+                                    <li key='background-image' className={`mb-0 flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
+                                        <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
+                                            <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
+                                        </span>
+                                    </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
@@ -35,7 +66,7 @@ export function ColorButton({onClick, label, name, color, selectedName}) {
 
     const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
     return (
-        <li>
+        <li className="mb-0">
             <button
                 aria-label={label}
                 className={`group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}
diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 288889701d..2aceaaa19b 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -1,12 +1,12 @@
 import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
-import React, {Fragment, useCallback, useEffect, useRef} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
 import {HexColorInput, HexColorPicker} from 'react-colorful';
 import {Tooltip} from './Tooltip';
 import {getAccentColor} from '../../utils/getAccentColor';
 
-export function ColorPicker({value, eyedropper, hasTransparentOption, onChange}) {
+export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, children}) {
     // HexColorInput doesn't support adding a ref on the input itself
     const inputWrapperRef = useRef(null);
 
@@ -76,7 +76,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange})
     }, []);
 
     return (
-        <div className="mt-2" onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
+        <div onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
             <HexColorPicker color={hexValue || '#ffffff'} onChange={onChange} onMouseDown={startUsingColorPicker} onTouchStart={startUsingColorPicker} />
             <div className="mt-3 flex gap-2">
                 <div ref={inputWrapperRef} className={`relative flex w-full items-center rounded-lg border border-grey-100 bg-grey-100 px-3 py-1.5 font-sans text-sm font-normal text-grey-900 transition-colors placeholder:text-grey-500 focus-within:border-green focus-within:bg-white focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] focus-within:outline-none dark:border-transparent dark:bg-grey-900 dark:text-white dark:selection:bg-grey-800 dark:placeholder:text-grey-700 dark:focus-within:border-green dark:hover:bg-grey-925 dark:focus:bg-grey-925`} onClick={focusHexInputOnClick}>
@@ -94,6 +94,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange})
                 </div>
 
                 {hasTransparentOption && <Button color='grey' value='Clear' onClick={() => onChange('transparent')} />}
+                {children}
             </div>
         </div>
     );
@@ -134,9 +135,28 @@ function ColorSwatch({hex, accent, transparent, title, isSelected, onSelect}) {
     );
 }
 
-export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker, isExpanded}) {
+export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker, onChange, isExpanded, eyedropper, hasTransparentOption, children}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showColorPicker, setShowColorPicker] = useState(false);
+    const [showChildren, setShowChildren] = useState(false);
+    const popoverRef = useRef(null);
+    
+    const stopPropagation = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    }, []);
+
+    useEffect(() => {
+        if (isExpanded) {
+            setIsOpen(true);
+            setShowChildren(true);
+            setShowColorPicker(false);
+        }
+    }, [isExpanded]);
+
     let backgroundColor = value;
     let selectedSwatch = swatches.find(swatch => swatch.hex === value)?.title;
+    
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
@@ -149,22 +169,110 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
         selectedSwatch = null;
     }
 
+    const handleColorPickerChange = (newValue) => {
+        onChange(newValue);
+        // Don't close the popover when using the color picker
+    };
+
     return (
-        <div className='flex gap-1'>
-            <div className={`flex items-center gap-1`}>
-                {swatches.map(({customContent, ...swatch}) => (
-                    customContent ? <Fragment key={swatch.title}>{customContent}</Fragment> : <ColorSwatch key={swatch.title} isSelected={selectedSwatch === swatch.title} onSelect={onSwatchChange} {...swatch} />
-                ))}
-            </div>
-            <button aria-label="Pick color" className="group relative size-6 rounded-full border border-grey-200 dark:border-grey-800" type="button" onClick={onTogglePicker}>
-                <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
-                {value && !selectedSwatch && (
-                    <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
-                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
-                    </div>
+        <div className="relative">
+            <button 
+                className={`relative size-6 cursor-pointer rounded-full ${value ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                type="button"
+                onClick={() => {
+                    setIsOpen(!isOpen);
+                    setShowColorPicker(false);
+                    setShowChildren(false);
+                }}
+            >
+                {value && (
+                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        WebkitMaskComposite: 'xor',
+                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        maskComposite: 'exclude'
+                    }} />
                 )}
-                <Tooltip label='Pick color' />
+                <span 
+                    className="block size-full rounded-full border-2 border-white"
+                    style={{backgroundColor}}
+                >
+                    {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                </span>
             </button>
+
+            {isOpen && (
+                <div 
+                    ref={popoverRef}
+                    className={clsx(
+                        'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-950',
+                        (showColorPicker || showChildren) && 'min-w-[296px]'
+                    )}
+                    onClick={stopPropagation}
+                    onMouseDown={stopPropagation}
+                    onTouchStart={stopPropagation}
+                >
+                    {showColorPicker && (
+                        <ColorPicker 
+                            eyedropper={eyedropper}
+                            hasTransparentOption={hasTransparentOption}
+                            value={value}
+                            onChange={handleColorPickerChange}
+                        />
+                    )}
+                    {showChildren && children}
+                    <div className="flex justify-end gap-1">
+                        <div className={`flex items-center gap-1`}>
+                            {swatches.map(({customContent, ...swatch}) => (
+                                customContent ? 
+                                    <Fragment key={swatch.title}>{customContent}</Fragment> : 
+                                    <ColorSwatch 
+                                        key={swatch.title} 
+                                        isSelected={selectedSwatch === swatch.title} 
+                                        onSelect={(value) => {
+                                            onSwatchChange(value);
+                                            setShowColorPicker(false);
+                                            setIsOpen(false);
+                                        }} 
+                                        {...swatch} 
+                                    />
+                            ))}
+                        </div>
+                        <button 
+                            aria-label="Pick color" 
+                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                            type="button" 
+                            onClick={() => {
+                                setShowColorPicker(!showColorPicker);
+                                setShowChildren(false);
+                                onTogglePicker();
+                            }}
+                        >
+                            {!selectedSwatch ? (
+                                <>
+                                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                        WebkitMaskComposite: 'xor',
+                                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                        maskComposite: 'exclude'
+                                    }} />
+                                    <span 
+                                        className="block size-full rounded-full border-2 border-white"
+                                        style={{backgroundColor: value}}
+                                    >
+                                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                                    </span>
+                                </>
+                            ) : (
+                                <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
+                            )}
+                            <Tooltip label='Pick color' />
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
index 794d1ce45b..b1fe9fe312 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
@@ -6,6 +6,7 @@ import ProductPlaceholderIcon from '../../assets/icons/kg-product-placeholder.sv
 import PropTypes from 'prop-types';
 import React from 'react';
 import VideoPlaceholderIcon from '../../assets/icons/kg-video-placeholder.svg?react';
+import clsx from 'clsx';
 
 export const PLACEHOLDER_ICONS = {
     image: ImgPlaceholderIcon,
@@ -16,17 +17,24 @@ export const PLACEHOLDER_ICONS = {
     product: ProductPlaceholderIcon
 };
 
-export const CardText = ({text}) => {
-    return (
-        <span className="font-sans text-sm font-bold text-grey-800 transition-all group-hover:text-grey-800" data-kg-card-drag-text>{text}</span>
-    );
-};
+export const CardText = ({text, type}) => (
+    <span 
+        className={clsx(
+            'text-center font-sans text-sm font-semibold text-grey-800 transition-all group-hover:text-grey-800',
+            type === 'button' && 'px-3 py-1'
+        )}
+        data-kg-card-drag-text
+    >
+        {text}
+    </span>
+);
 
 export function MediaPlaceholder({
     desc,
     icon,
     filePicker,
     size,
+    type,
     borderStyle,
     isDraggedOver,
     errors = [],
@@ -38,33 +46,99 @@ export function MediaPlaceholder({
 }) {
     const Icon = PLACEHOLDER_ICONS[icon];
 
+    const containerClasses = clsx(
+        'relative flex h-full items-center justify-center',
+        type === 'button' ? 'rounded-lg bg-grey-100' : 'border bg-grey-50',
+        size === 'xsmall' && type !== 'button' && 'before:pb-[12.5%] dark:bg-grey-900',
+        size !== 'xsmall' && type !== 'button' && 'before:pb-[62.5%] dark:bg-grey-950',
+        borderStyle === 'rounded' && type !== 'button' && 'rounded-lg border-grey/20 dark:border-transparent',
+        borderStyle !== 'rounded' && type !== 'button' && 'border-grey/20 dark:border-grey/10'
+    );
+
+    const iconClasses = clsx(
+        'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100',
+        size === 'large' && 'size-20 text-grey',
+        size === 'small' && 'size-14 text-grey',
+        size === 'xsmall' && 'size-5 text-grey-700',
+        !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey',
+        (size === 'xsmall' && desc) && 'mr-3'
+    );
+
+    const descriptionClasses = clsx(
+        'flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100',
+        size === 'xsmall' && '!mt-0',
+        size !== 'xsmall' && '!mt-4'
+    );
+
+    const buttonClasses = clsx(
+        'group flex cursor-pointer select-none items-center justify-center',
+        size === 'xsmall' && 'p-4',
+        size !== 'xsmall' && 'flex-col p-20'
+    );
+
+    const errorClasses = clsx(
+        'font-sans text-sm font-semibold text-red',
+        size !== 'xsmall' && 'mt-3 max-w-[65%]'
+    );
+
     return (
         <div
             ref={placeholderRef}
-            className="not-kg-prose size-full" {...props}
+            className="not-kg-prose size-full"
+            {...props}
             data-testid={dataTestId}
         >
-            <div className={`relative flex h-full items-center justify-center border bg-grey-50 ${size === 'xsmall' ? 'before:pb-[12.5%] dark:bg-grey-900' : 'before:pb-[62.5%] dark:bg-grey-950'} ${borderStyle === 'rounded' ? 'rounded-lg border-grey/20 dark:border-transparent' : 'border-grey/20 dark:border-grey/10'}`}>
-                {isDraggedOver ?
-                    <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} /> :
+            <div className={containerClasses}>
+                {isDraggedOver ? (
+                    <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} type={type} />
+                ) : (
                     <>
-                        <button className={`group flex cursor-pointer select-none items-center justify-center ${size === 'xsmall' ? 'p-4' : 'flex-col p-20'}`} name="placeholder-button" type="button" onClick={filePicker}>
-                            {(size === 'xsmall' && errors.length > 0) ||
-                                <>
-                                    <Icon className={`shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100 ${size === 'large' ? 'size-20 text-grey' : size === 'small' ? 'size-14 text-grey' : size === 'xsmall' ? 'size-5 text-grey-700' : 'size-16 text-grey'} ${(size === 'xsmall') && desc ? 'mr-3' : ''}`} />
-                                    <p className={`flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100 ${size === 'xsmall' ? '!mt-0' : '!mt-4'}`}>{desc}</p>
-                                </>
-                            }
-                            {errors.map(error => (
-                                <span
-                                    key={error.message}
-                                    className={`font-sans text-sm font-semibold text-red ${size === 'xsmall' || 'mt-3 max-w-[65%]'}`}
-                                    data-testid={errorDataTestId}
-                                >{error.message}</span>
-                            ))}
-                        </button>
+                        {type === 'button' ? (
+                            <button 
+                                className="group flex cursor-pointer select-none items-center justify-center px-3 py-1" 
+                                name="placeholder-button" 
+                                type="button" 
+                                onClick={filePicker}
+                            >
+                                {!errors.length && (
+                                    <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>
+                                )}
+                                {errors.map(error => (
+                                    <span
+                                        key={error.message}
+                                        className={errorClasses}
+                                        data-testid={errorDataTestId}
+                                    >
+                                        {error.message}
+                                    </span>
+                                ))}
+                            </button>
+                        ) : (
+                            <button 
+                                className={buttonClasses}
+                                name="placeholder-button" 
+                                type="button" 
+                                onClick={filePicker}
+                            >
+                                {!(size === 'xsmall' && errors.length > 0) && (
+                                    <>
+                                        <Icon className={iconClasses} />
+                                        <p className={descriptionClasses}>{desc}</p>
+                                    </>
+                                )}
+                                {errors.map(error => (
+                                    <span
+                                        key={error.message}
+                                        className={errorClasses}
+                                        data-testid={errorDataTestId}
+                                    >
+                                        {error.message}
+                                    </span>
+                                ))}
+                            </button>
+                        )}
                     </>
-                }
+                )}
             </div>
         </div>
     );
@@ -74,6 +148,7 @@ MediaPlaceholder.propTypes = {
     icon: PropTypes.oneOf(['image', 'gallery', 'video', 'audio', 'file', 'product']),
     desc: PropTypes.string,
     size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
+    type: PropTypes.oneOf(['image', 'button']),
     borderStyle: PropTypes.oneOf(['squared', 'rounded'])
 };
 
diff --git a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
index ca108223c8..1c1cfc606d 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
@@ -17,6 +17,7 @@ export function MediaUploader({
     desc,
     icon,
     size,
+    type,
     borderStyle = 'squared',
     backgroundSize = 'cover',
     mimeTypes,
@@ -64,6 +65,7 @@ export function MediaUploader({
                     isDraggedOver={dragHandler?.isDraggedOver}
                     placeholderRef={dragHandler?.setRef}
                     size={size}
+                    type={type}
                 />
                 <ImageUploadForm
                     fileInputRef={onFileInputRef}
@@ -120,6 +122,7 @@ MediaUploader.propTypes = {
     desc: PropTypes.string,
     icon: PropTypes.string,
     size: PropTypes.string,
+    type: PropTypes.oneOf(['image', 'button']),
     borderStyle: PropTypes.string,
     mimeTypes: PropTypes.arrayOf(PropTypes.string),
     onFileChange: PropTypes.func,
diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
index ef1b357724..dca5109966 100644
--- a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
+++ b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import useSettingsPanelReposition from '../../hooks/useSettingsPanelReposition';
 import {ButtonGroup} from './ButtonGroup';
-import {ColorIndicator, ColorPicker} from './ColorPicker';
+import {ColorIndicator} from './ColorPicker';
 import {ColorOptionButtons} from './ColorOptionButtons';
 import {Dropdown} from './Dropdown';
 import {Input} from './Input';
@@ -243,29 +243,11 @@ export function ColorOptionSetting({label, onClick, selectedName, buttons, layou
     );
 }
 
-export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerChange, onTogglePicker, value, swatches, eyedropper, hasTransparentOption, dataTestId}) {
-    const mappedPicker = (event) => {
-        onTogglePicker(true);
-    };
-
+export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerChange, onTogglePicker, value, swatches, eyedropper, hasTransparentOption, dataTestId, customToolbarContent, children}) {
     const markClickedInside = (event) => {
         event.stopPropagation();
     };
 
-    // Close on click outside
-    React.useEffect(() => {
-        if (isExpanded) {
-            const closePicker = (event) => {
-                onTogglePicker(false);
-            };
-            document.addEventListener('click', closePicker);
-
-            return () => {
-                document.removeEventListener('click', closePicker);
-            };
-        }
-    }, [isExpanded, onTogglePicker]);
-
     return (
         <div className="flex-col" data-testid={dataTestId} onClick={markClickedInside}>
             <div className="flex w-full items-center justify-between text-[1.3rem]">
@@ -273,28 +255,36 @@ export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerC
 
                 <div className="shrink-0 pl-2">
                     <ColorIndicator
+                        eyedropper={eyedropper}
+                        hasTransparentOption={hasTransparentOption}
                         isExpanded={isExpanded}
                         swatches={swatches}
                         value={value}
+                        onChange={onPickerChange}
                         onSwatchChange={onSwatchChange}
-                        onTogglePicker={mappedPicker}
-                    />
+                        onTogglePicker={onTogglePicker}
+                    >
+                        {children}
+                    </ColorIndicator>
                 </div>
             </div>
-            {isExpanded && <ColorPicker eyedropper={eyedropper} hasTransparentOption={hasTransparentOption} value={value} onChange={onPickerChange} />}
         </div>
     );
 }
 
-export function MediaUploadSetting({className, label, hideLabel, onFileChange, isDraggedOver, placeholderRef, src, alt, isLoading, errors = [], progress, onRemoveMedia, icon, desc = '', size, stacked, borderStyle, mimeTypes, isPinturaEnabled, openImageEditor, setFileInputRef}) {
+export function MediaUploadSetting({className, label, hideLabel, onFileChange, isDraggedOver, placeholderRef, src, alt, isLoading, errors = [], progress, onRemoveMedia, icon, desc, size, type, stacked, borderStyle, mimeTypes, isPinturaEnabled, openImageEditor, setFileInputRef}) {
     return (
-        <div className={clsx(className, !stacked && 'flex justify-between')} data-testid="media-upload-setting">
-            <div className={hideLabel ? 'sr-only' : 'mb-2 text-sm font-medium tracking-normal text-grey-900 dark:text-grey-400'}>{label}</div>
+        <div className={clsx(className, !stacked && 'flex justify-between gap-3')} data-testid="media-upload-setting">
+            <div className={hideLabel ? 'sr-only' : 'mb-2 shrink-0 text-sm font-medium tracking-normal text-grey-900 dark:text-grey-400'}>{label}</div>
 
             <MediaUploader
                 alt={alt}
                 borderStyle={borderStyle}
-                className={clsx(stacked ? 'h-32' : src ? 'h-[5.2rem]' : 'h-[5.2rem] w-[7.2rem]')}
+                className={clsx(
+                    stacked && 'h-32',
+                    !stacked && src && 'h-[5.2rem]',
+                    !stacked && type !== 'button' && !src && 'h-[5.2rem] w-[7.2rem]'
+                )}
                 desc={desc}
                 dragHandler={{isDraggedOver, setRef: placeholderRef}}
                 errors={errors}
@@ -307,6 +297,7 @@ export function MediaUploadSetting({className, label, hideLabel, onFileChange, i
                 setFileInputRef={setFileInputRef}
                 size={size}
                 src={src}
+                type={type}
                 onFileChange={onFileChange}
                 onRemoveMedia={onRemoveMedia}
             />
diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 79e611eb20..c92c8a00dc 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -21,7 +21,9 @@ export const CALLTOACTION_COLORS = {
     blue: 'bg-blue/10 border-transparent',
     green: 'bg-green/10 border-transparent',
     yellow: 'bg-yellow/10 border-transparent',
-    red: 'bg-red/10 border-transparent'
+    red: 'bg-red/10 border-transparent',
+    pink: 'bg-pink/10 border-transparent',
+    purple: 'bg-purple/10 border-transparent'
 };
 
 const sponsoredLabelTheme = {
@@ -43,27 +45,37 @@ export const callToActionColorPicker = [
     {
         label: 'Grey',
         name: 'grey',
-        color: 'bg-grey/15 border-black/[.08] dark:border-white/10'
+        color: 'bg-grey/20 border-black/[.08] dark:border-white/10'
     },
     {
         label: 'Blue',
         name: 'blue',
-        color: 'bg-blue/15 border-black/[.08] dark:border-white/10'
+        color: 'bg-blue/20 border-black/[.08] dark:border-white/10'
     },
     {
         label: 'Green',
         name: 'green',
-        color: 'bg-green/15 border-black/[.08] dark:border-white/10'
+        color: 'bg-green/20 border-black/[.08] dark:border-white/10'
     },
     {
         label: 'Yellow',
         name: 'yellow',
-        color: 'bg-yellow/15 border-black/[.08] dark:border-white/10'
+        color: 'bg-yellow/20 border-black/[.08] dark:border-white/10'
     },
     {
         label: 'Red',
         name: 'red',
-        color: 'bg-red/15 border-black/[.08] dark:border-white/10'
+        color: 'bg-red/20 border-black/[.08] dark:border-white/10'
+    },
+    {
+        label: 'Pink',
+        name: 'pink',
+        color: 'bg-pink/20 border-black/[0.08] dark:border-white/10'
+    },
+    {
+        label: 'Purple',
+        name: 'purple',
+        color: 'bg-purple/20 border-black/[0.08] dark:border-white/10'
     }
 ];
 
@@ -123,13 +135,6 @@ export function CallToActionCard({
 
     const designSettings = (
         <>
-            {/* Color picker */}
-            <ColorOptionSetting
-                buttons={callToActionColorPicker}
-                label='Background'
-                selectedName={color}
-                onClick={handleColorChange}
-            />
             {/* Layout settings */}
             <ButtonGroupSetting
                 buttons={layoutOptions}
@@ -137,6 +142,13 @@ export function CallToActionCard({
                 selectedName={layout}
                 onClick={updateLayout}
             />
+            {/* Color picker */}
+            <ColorOptionSetting
+                buttons={callToActionColorPicker}
+                label='Background'
+                selectedName={color}
+                onClick={handleColorChange}
+            />
             {/* Sponsor label setting */}
             <ToggleSetting
                 dataTestId="sponsor-label-toggle"
@@ -148,12 +160,13 @@ export function CallToActionCard({
             <MediaUploadSetting
                 alt='Image'
                 borderStyle={'rounded'}
+                desc='Upload'
                 icon='file'
                 label='Image'
                 mimeTypes={['image/*']}
                 setFileInputRef={setFileInputRef}
-                size='xsmall'
                 src={imageSrc}
+                type='button'
                 onFileChange={onFileChange}
                 onRemoveMedia={onRemoveMedia}
             />
@@ -237,7 +250,7 @@ export function CallToActionCard({
                             initialTheme={sponsoredLabelTheme}
                             nodes='basic'
                             textClassName={clsx(
-                                'not-kg-prose w-full whitespace-normal font-sans !text-xs font-semibold uppercase leading-8 tracking-normal text-grey-900/40 dark:text-grey-100/40'
+                                'koenig-lexical-cta-label not-kg-prose w-full whitespace-normal font-sans !text-xs font-semibold uppercase leading-8 tracking-normal text-grey-900/40 dark:text-grey-200/40'
                             )}
                             useDefaultClasses={false}
                         >
@@ -280,7 +293,7 @@ export function CallToActionCard({
                             placeholderClassName={`bg-transparent whitespace-normal font-serif text-xl !text-grey-500 !dark:text-grey-800 ` }
                             placeholderText="Write something worth clicking..."
                             textClassName={clsx(
-                                'w-full whitespace-normal text-pretty bg-transparent font-serif text-xl text-grey-900 dark:text-grey-200',
+                                'koenig-lexical-cta-text w-full whitespace-normal text-pretty bg-transparent font-serif text-xl text-grey-900 dark:text-grey-200',
                                 layout === 'immersive' ? 'text-center' : 'text-left'
                             )}
                         >
@@ -332,7 +345,7 @@ CallToActionCard.propTypes = {
     buttonUrl: PropTypes.string,
     buttonColor: PropTypes.string,
     buttonTextColor: PropTypes.string,
-    color: PropTypes.oneOf(['none', 'grey', 'white', 'blue', 'green', 'yellow', 'red']),
+    color: PropTypes.oneOf(['none', 'grey', 'white', 'blue', 'green', 'yellow', 'red', 'pink', 'purple']),
     hasSponsorLabel: PropTypes.bool,
     imageSrc: PropTypes.string,
     isEditing: PropTypes.bool,
@@ -366,7 +379,7 @@ CallToActionCard.defaultProps = {
     imageSrc: '',
     isEditing: false,
     layout: 'immersive',
-    showButton: false,
+    showButton: true,
     updateHasSponsorLabel: () => {},
     updateShowButton: () => {},
     updateLayout: () => {},
diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
index eec21adf8a..7b1b6b4542 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
@@ -43,37 +43,37 @@ export const calloutColorPicker = [
     {
         label: 'Grey',
         name: 'grey',
-        color: 'bg-grey/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-grey/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Blue',
         name: 'blue',
-        color: 'bg-blue/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-blue/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Green',
         name: 'green',
-        color: 'bg-green/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-green/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Yellow',
         name: 'yellow',
-        color: 'bg-yellow/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-yellow/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Red',
         name: 'red',
-        color: 'bg-red/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-red/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Pink',
         name: 'pink',
-        color: 'bg-pink/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-pink/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Purple',
         name: 'purple',
-        color: 'bg-purple/15 border-black/[0.08] dark:border-white/10'
+        color: 'bg-purple/20 border-black/[0.08] dark:border-white/10'
     },
     {
         label: 'Accent',
@@ -158,7 +158,6 @@ export function CalloutCard({
                             buttons={calloutColorPicker}
                             dataTestId='callout-color-picker'
                             label='Background'
-                            layout='stacked'
                             selectedName={color}
                             onClick={handleColorChange}
                         />
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 1f20d78929..1af4e8f9ac 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -415,7 +415,7 @@ export function HeaderCard({alignment,
                                         type="button"
                                         onClick={() => {
                                             handleShowBackgroundImage();
-                                            setBackgroundColorPickerExpanded(false);
+                                            setBackgroundColorPickerExpanded(true);
                                             setButtonColorPickerExpanded(false);
                                         }}
                                     >
@@ -434,7 +434,7 @@ export function HeaderCard({alignment,
                             handleBackgroundColor(color, matchingTextColor(color));
                             setBackgroundColorPickerExpanded(false);
                         }}
-                        onTogglePicker={ (isExpanded) => {
+                        onTogglePicker={(isExpanded) => {
                             if (isExpanded) {
                                 if (layout !== 'split') {
                                     handleHideBackgroundImage();
@@ -450,32 +450,34 @@ export function HeaderCard({alignment,
                                 setButtonColorPickerExpanded(!isExpanded);
                             }
                         }}
-                    />
-                    <MediaUploadSetting
-                        alt='Background image'
-                        borderStyle={'rounded'}
-                        className={(!showBackgroundImage || layout === 'split') && 'hidden'}
-                        errors={fileUploader?.errors}
-                        hideLabel={layout !== 'split'}
-                        icon='file'
-                        isDraggedOver={imageDragHandler?.isDraggedOver}
-                        isLoading={isLoading}
-                        isPinturaEnabled={isPinturaEnabled}
-                        label='Image'
-                        mimeTypes={['image/*']}
-                        openImageEditor={openImageEditor}
-                        placeholderRef={imageDragHandler?.setRef}
-                        progress={progress}
-                        setFileInputRef={setFileInputRef}
-                        size='xsmall'
-                        src={backgroundImageSrc}
-                        stacked={true}
-                        onFileChange={onFileChange}
-                        onRemoveMedia={() => {
-                            handleClearBackgroundImage();
-                            handleTextColor(matchingTextColor(backgroundColor));
-                        }}
-                    />
+                    >
+                        {layout !== 'split' && showBackgroundImage && (
+                            <MediaUploadSetting
+                                alt='Background image'
+                                borderStyle={'rounded'}
+                                desc='Click to select image'
+                                errors={fileUploader?.errors}
+                                hideLabel={true}
+                                icon='file'
+                                isDraggedOver={imageDragHandler?.isDraggedOver}
+                                isLoading={isLoading}
+                                isPinturaEnabled={isPinturaEnabled}
+                                mimeTypes={['image/*']}
+                                openImageEditor={openImageEditor}
+                                placeholderRef={imageDragHandler?.setRef}
+                                progress={progress}
+                                setFileInputRef={setFileInputRef}
+                                size='xsmall'
+                                src={backgroundImageSrc}
+                                stacked={true}
+                                onFileChange={onFileChange}
+                                onRemoveMedia={() => {
+                                    handleClearBackgroundImage();
+                                    handleTextColor(matchingTextColor(backgroundColor));
+                                }}
+                            />
+                        )}
+                    </ColorPickerSetting>
 
                     {/* Button settings */}
                     <ToggleSetting
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index f93898e0dc..7443f04516 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -413,7 +413,7 @@ export function SignupCard({alignment,
                                         type="button"
                                         onClick={() => {
                                             handleShowBackgroundImage();
-                                            setBackgroundColorPickerExpanded(false);
+                                            setBackgroundColorPickerExpanded(true);
                                             setButtonColorPickerExpanded(false);
                                         }}
                                     >
@@ -448,33 +448,34 @@ export function SignupCard({alignment,
                                 setButtonColorPickerExpanded(!isExpanded);
                             }
                         }}
-                    />
-
-                    <MediaUploadSetting
-                        alt='Background image'
-                        borderStyle={'rounded'}
-                        className={(!showBackgroundImage || layout === 'split') && 'hidden'}
-                        errors={fileUploader?.errors}
-                        hideLabel={layout !== 'split'}
-                        icon='file'
-                        isDraggedOver={imageDragHandler?.isDraggedOver}
-                        isLoading={isLoading}
-                        isPinturaEnabled={isPinturaEnabled}
-                        label='Image'
-                        mimeTypes={['image/*']}
-                        openImageEditor={openImageEditor}
-                        placeholderRef={imageDragHandler?.setRef}
-                        progress={progress}
-                        setFileInputRef={setFileInputRef}
-                        size='xsmall'
-                        src={backgroundImageSrc}
-                        stacked={true}
-                        onFileChange={onFileChange}
-                        onRemoveMedia={() => {
-                            handleClearBackgroundImage();
-                            handleTextColor(matchingTextColor(backgroundColor));
-                        }}
-                    />
+                    >
+                        {layout !== 'split' && showBackgroundImage && (
+                            <MediaUploadSetting
+                                alt='Background image'
+                                borderStyle={'rounded'}
+                                desc='Click to select image'
+                                errors={fileUploader?.errors}
+                                hideLabel={true}
+                                icon='file'
+                                isDraggedOver={imageDragHandler?.isDraggedOver}
+                                isLoading={isLoading}
+                                isPinturaEnabled={isPinturaEnabled}
+                                mimeTypes={['image/*']}
+                                openImageEditor={openImageEditor}
+                                placeholderRef={imageDragHandler?.setRef}
+                                progress={progress}
+                                setFileInputRef={setFileInputRef}
+                                size='xsmall'
+                                src={backgroundImageSrc}
+                                stacked={true}
+                                onFileChange={onFileChange}
+                                onRemoveMedia={() => {
+                                    handleClearBackgroundImage();
+                                    handleTextColor(matchingTextColor(backgroundColor));
+                                }}
+                            />
+                        )}
+                    </ColorPickerSetting>
 
                     <ColorPickerSetting
                         dataTestId='signup-button-color'
diff --git a/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx b/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
index fc8b80dec2..c05b6d06b6 100644
--- a/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
@@ -99,6 +99,7 @@ function PopulatedVideoCard({
                                 alt='Custom thumbnail'
                                 borderStyle={'rounded'}
                                 dataTestId="custom-thumbnail-replace"
+                                desc='Upload'
                                 errors={customThumbnailUploader.errors}
                                 icon='file'
                                 isDraggedOver={thumbnailDragHandler.isDraggedOver}
@@ -107,8 +108,8 @@ function PopulatedVideoCard({
                                 mimeTypes={thumbnailMimeTypes}
                                 placeholderRef={thumbnailDragHandler.setRef}
                                 progress={customThumbnailUploader.progress}
-                                size='xsmall'
                                 src={customThumbnail}
+                                type='button'
                                 onFileChange={onCustomThumbnailChange}
                                 onRemoveMedia={onRemoveCustomThumbnail}
                             />
diff --git a/packages/koenig-lexical/src/styles/components/kg-prose.css b/packages/koenig-lexical/src/styles/components/kg-prose.css
index d183aad1d3..b7f945150c 100644
--- a/packages/koenig-lexical/src/styles/components/kg-prose.css
+++ b/packages/koenig-lexical/src/styles/components/kg-prose.css
@@ -981,6 +981,14 @@
     }
 }
 
+.koenig-lexical-cta-label a {
+    @apply !text-grey-900 dark:!text-grey-200 underline;
+}
+
+.koenig-lexical-cta-text a {
+    @apply !text-grey-900 dark:!text-grey-200;
+}
+
 /* stylelint-enable at-rule-disallowed-list */
 
 
diff --git a/packages/koenig-lexical/tailwind.config.cjs b/packages/koenig-lexical/tailwind.config.cjs
index f6133fb4fe..925d003c2e 100644
--- a/packages/koenig-lexical/tailwind.config.cjs
+++ b/packages/koenig-lexical/tailwind.config.cjs
@@ -91,6 +91,7 @@ module.exports = {
         },
         boxShadow: {
             DEFAULT: '0 0 1px rgba(0,0,0,.15), 0px 13px 27px -5px rgba(50, 50, 93, 0.08), 0px 8px 16px -8px rgba(0, 0, 0, 0.12)',
+            xs: '0px 1px 2px rgba(0, 0, 0, 0.06)',
             sm: '0px 2px 5px -1px rgba(50, 50, 93, 0.2), 0px 1px 3px -1px rgba(0, 0, 0, 0.25)',
             md: '0px 13px 27px -5px rgba(50, 50, 93, 0.25), 0px 8px 16px -8px rgba(0, 0, 0, 0.3)',
             lg: '0px 50px 100px -25px rgba(50, 50, 93, 0.2), 0px 30px 60px -20px rgba(0, 0, 0, 0.25)',

From a669fa9533fad1f4624159643320ea1fd283dac6 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Wed, 19 Feb 2025 15:42:30 +0900
Subject: [PATCH 02/41] Fixed Colour selection tests

---
 .../src/components/ui/ColorPicker.jsx         |  7 ++--
 .../ui/cards/HeaderCard/v1/HeaderCard.jsx     |  1 +
 .../test/e2e/cards/callout-card.test.js       | 38 +++++++++----------
 .../test/e2e/cards/header-card.test.js        | 27 ++++++-------
 .../test/e2e/cards/signup-card.test.js        | 22 +++++++----
 .../test/utils/background-color-helper.js     | 28 ++++++++++++++
 6 files changed, 80 insertions(+), 43 deletions(-)
 create mode 100644 packages/koenig-lexical/test/utils/background-color-helper.js

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 2aceaaa19b..66009e73f3 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -239,9 +239,10 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                                     />
                             ))}
                         </div>
-                        <button 
-                            aria-label="Pick color" 
-                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                        <button
+                            aria-label="Pick color"
+                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`} 
+                            data-testid="color-picker-toggle"
                             type="button" 
                             onClick={() => {
                                 setShowColorPicker(!showColorPicker);
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx
index fae3396026..0b6c7da56f 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v1/HeaderCard.jsx
@@ -178,6 +178,7 @@ export function HeaderCard({isEditing,
                     />
                     <ColorOptionSetting
                         buttons={colorPickerChildren}
+                        dataTestId='header-background-color'
                         label='Style'
                         selectedName={type}
                         onClick={handleColorSelector}
diff --git a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
index 467af9c8c1..3cc5bdb024 100644
--- a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
@@ -1,5 +1,5 @@
 import {assertHTML, createSnippet, focusEditor, html, initialize, insertCard, isMac} from '../../utils/e2e';
-// import {calloutColorPicker} from '../../../src/components/ui/cards/CalloutCardx';
+import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 
 test.describe('Callout Card', async () => {
@@ -125,26 +125,23 @@ test.describe('Callout Card', async () => {
         await expect(emojiPickerContainer).toBeVisible();
     });
 
-    test('colour picker renders all colours', async function () {
-        await focusEditor(page);
-        await insertCard(page, {cardName: 'callout'});
+    // test('colour picker renders all colours', async function () {
+    // await focusEditor(page);
+    // await insertCard(page, {cardName: 'callout'});
 
-        // await Promise.all(calloutColorPicker.map(async (color) => {
-        //     const colorPicker = page.locator(`[data-test-id="color-picker-${color.name}"]`);
-        //     await expect(colorPicker).toBeVisible();
-        // }));
-    });
+    //     // await Promise.all(calloutColorPicker.map(async (color) => {
+    //     //     const colorPicker = page.locator(`[data-test-id="color-picker-${color.name}"]`);
+    //     //     await expect(colorPicker).toBeVisible();
+    //     // }));
+    // });
 
-    test('can change background color', async function () {
+    test('can change background color to green', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'callout'});
-
-        const colorPicker = page.locator(`[data-test-id="color-picker-green"]`);
-        await colorPicker.click();
-
-        // ensure data-test-id="callout-bg-blue" is visible
-        const greenCallout = page.locator('[data-testid="callout-bg-green"]');
-        await expect(greenCallout).toBeVisible();
+        await cardBackgroundColorSettings(page, {
+            cardColorPickerTestId: 'callout-color-picker',
+            colorTestId: 'color-picker-green'
+        });
     });
 
     test('can select an emoji', async function () {
@@ -315,8 +312,11 @@ test.describe('Callout Card', async () => {
         await page.keyboard.type('Hello ');
 
         // Change color
-        await page.locator(`[data-test-id="color-picker-green"]`).click();
-
+        // await page.locator(`[data-test-id="color-picker-green"]`).click();
+        await cardBackgroundColorSettings(page, {
+            cardColorPickerTestId: 'callout-color-picker',
+            colorTestId: 'color-picker-green'
+        });
         // Continue editing the content
         await page.keyboard.type('world');
 
diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
index a7c0c8fdf8..15d75e6419 100644
--- a/packages/koenig-lexical/test/e2e/cards/header-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
@@ -1,5 +1,6 @@
 import path from 'path';
 import {assertHTML, focusEditor, html, initialize, isMac} from '../../utils/e2e';
+import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -218,27 +219,23 @@ test.describe('Header card V1', async () => {
     test('can change the background color', async function () {
         await createHeaderCard({page});
 
-        const lightButton = page.locator('[aria-label="Light"]');
-        const darkButton = page.locator('[aria-label="Dark"]');
-        const accentButton = page.locator('[aria-label="Accent"]');
-
         // Default class should be 'bg-black' on the card
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-black /);
 
         // Switch to light
-        await lightButton.click();
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-light'});
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-grey-100 /);
 
         // Switch back to dark
-        await darkButton.click();
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-dark'});
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-black /);
 
         // Switch to accent
-        await accentButton.click();
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-accent'});
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-accent /);
@@ -528,10 +525,12 @@ test.describe('Header card V2', () => {
 
         await page.click('[data-testid="header-button-toggle"]');
 
-        await page.click('[data-testid="header-button-color"] [aria-label="Pick color"]');
+        // await page.click('[data-testid="header-button-color"] [aria-label="Pick color"]');
 
-        await page.fill('[data-testid="header-button-color"] input', '');
-        await page.keyboard.type('ff0000');
+        // await page.fill('[data-testid="header-button-color"] input', '');
+        // await page.keyboard.type('ff0000');
+
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-button-color', customColor: 'ff0000'});
 
         // Selected colour should be applied inline
         await expect(page.locator('[data-testid="header-card-button"]')).toHaveCSS('background-color', 'rgb(255, 0, 0)');
@@ -548,10 +547,12 @@ test.describe('Header card V2', () => {
     test('can change the background color and text color', async function () {
         await createHeaderCard({page, version: 2});
 
-        await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', customColor: 'ff0000'});
 
-        await page.fill('[data-testid="header-background-color"] input', '');
-        await page.keyboard.type('ff0000');
+        // await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
+
+        // await page.fill('[data-testid="header-background-color"] input', '');
+        // await page.keyboard.type('ff0000');
 
         // Selected colour should be applied inline
         const container = page.getByTestId('header-card-container');
diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
index dcade04015..86150b7470 100644
--- a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
@@ -1,5 +1,6 @@
 import path from 'path';
 import {assertHTML, focusEditor, html, initialize, insertCard} from '../../utils/e2e';
+import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -198,14 +199,14 @@ test.describe('Signup card', async () => {
         await expect(page.getByTestId('signup-card-button')).toHaveText('Subscribe now');
     });
 
-    test('can change the button background color and text color', async function () {
+    test('can change the button color and text color', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'signup'});
 
-        await page.click('[data-testid="signup-button-color"] [aria-label="Pick color"]');
-
-        await page.fill('[data-testid="signup-button-color"] input', '');
-        await page.keyboard.type('ff0000');
+        await cardBackgroundColorSettings(page, {
+            customColor: 'ff0000',
+            cardColorPickerTestId: 'signup-button-color'
+        });
 
         // Selected colour should be applied inline
         await expect(page.locator('[data-testid="signup-card-button"]')).toHaveCSS('background-color', 'rgb(255, 0, 0)');
@@ -223,10 +224,15 @@ test.describe('Signup card', async () => {
         await focusEditor(page);
         await insertCard(page, {cardName: 'signup'});
 
-        await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
+        // await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
 
-        await page.fill('[data-testid="signup-background-color"] input', '');
-        await page.keyboard.type('ff0000');
+        // await page.fill('[data-testid="signup-background-color"] input', '');
+        // await page.keyboard.type('ff0000');
+
+        await cardBackgroundColorSettings(page, {
+            customColor: 'ff0000',
+            cardColorPickerTestId: 'signup-background-color'
+        });
 
         // Selected colour should be applied inline
         const container = page.getByTestId('signup-card-container');
diff --git a/packages/koenig-lexical/test/utils/background-color-helper.js b/packages/koenig-lexical/test/utils/background-color-helper.js
new file mode 100644
index 0000000000..c2a84437ae
--- /dev/null
+++ b/packages/koenig-lexical/test/utils/background-color-helper.js
@@ -0,0 +1,28 @@
+// import {expect} from '@playwright/test';
+
+export async function cardBackgroundColorSettings(page, {cardColorPickerTestId, customColor, colorTestId, findByColorTitle}) {
+    const colorSetting = page.locator(`[data-testid="${cardColorPickerTestId}"]`);
+    const colorButton = colorSetting.locator('button');
+    await colorButton.click();
+
+    if (findByColorTitle) {
+        const colorTitle = page.locator(`[title="${findByColorTitle}"]`);
+        await colorTitle.click();
+    }
+
+    if (customColor) {
+        const picker = page.locator(`[data-testid="color-picker-toggle"]`);
+        await picker.click();
+        const colorInput = page.locator(`input[aria-label="Color value"]`);
+        await colorInput.click({clickCount: 3});
+        await colorInput.type(customColor);
+    }
+    if (colorTestId) {
+        await page.locator(`[data-test-id="${colorTestId}"]`).click();
+    }
+    // await page.locator(`[data-test-id="${colorTestId}"]`).click();
+
+    // Ensure the expected background color is applied
+    // const coloredCard = page.locator(`[data-testid="${expectedBgTestId}"]`);
+    // await expect(coloredCard).toBeVisible();
+}

From 68cbe9e9b138142408f51965b8650899c6f033d6 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 20 Feb 2025 14:01:15 +0900
Subject: [PATCH 03/41] Added stopPropagation to Image Upload Form

---
 .../src/components/ui/ImageUploadForm.jsx     |  1 +
 .../src/components/ui/ImageUploadSwatch.jsx   | 24 +++++++++++++++
 .../ui/cards/HeaderCard/v2/HeaderCard.jsx     | 30 +++++++------------
 3 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx

diff --git a/packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx b/packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx
index 0b9806a467..b82c2a5ee9 100644
--- a/packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx
+++ b/packages/koenig-lexical/src/components/ui/ImageUploadForm.jsx
@@ -11,6 +11,7 @@ export function ImageUploadForm({onFileChange, fileInputRef, mimeTypes = ['image
                 multiple={multiple}
                 name="image-input"
                 type='file'
+                onClick={e => e.stopPropagation()}
             />
         </form>
     );
diff --git a/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx b/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx
new file mode 100644
index 0000000000..45025ad7ee
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx
@@ -0,0 +1,24 @@
+import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
+import clsx from 'clsx';
+import {Tooltip} from './Tooltip';
+
+export const ImageUploadSwatch = ({
+    showBackgroundImage,
+    onClickHandler
+}) => {
+    return (
+        <button
+            className={clsx(
+                `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
+                showBackgroundImage && 'outline outline-2 outline-green'
+            )}
+            data-testid="header-background-image-toggle"
+            title="Image"
+            type="button"
+            onClick={onClickHandler}
+        >
+            <ImgBgIcon className="size-[1.4rem]" />
+            <Tooltip label='Image' />
+        </button>
+    );
+};
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 1af4e8f9ac..04ff8eec30 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -1,6 +1,5 @@
 import CenterAlignIcon from '../../../../../assets/icons/kg-align-center.svg?react';
 import ExpandIcon from '../../../../../assets/icons/kg-expand.svg?react';
-import ImgBgIcon from '../../../../../assets/icons/kg-img-bg.svg?react';
 import ImgFullIcon from '../../../../../assets/icons/kg-img-full.svg?react';
 import ImgRegularIcon from '../../../../../assets/icons/kg-img-regular.svg?react';
 import ImgWideIcon from '../../../../../assets/icons/kg-img-wide.svg?react';
@@ -17,9 +16,9 @@ import {ButtonGroupSetting, ColorPickerSetting, InputSetting, InputUrlSetting, M
 import {Color, textColorForBackgroundColor} from '@tryghost/color-utils';
 import {FastAverageColor} from 'fast-average-color';
 import {IconButton} from '../../../IconButton';
+import {ImageUploadSwatch} from '../../../ImageUploadSwatch';
 import {MediaUploader} from '../../../MediaUploader';
 import {ReadOnlyOverlay} from '../../../ReadOnlyOverlay';
-import {Tooltip} from '../../../Tooltip';
 import {getAccentColor} from '../../../../../utils/getAccentColor';
 import {isEditorEmpty} from '../../../../../utils/isEditorEmpty';
 // Header Card Version 2
@@ -229,6 +228,12 @@ export function HeaderCard({alignment,
         }
     };
 
+    const onBackgroundImageClickHandler = () => {
+        handleShowBackgroundImage();
+        setBackgroundColorPickerExpanded(true);
+        setButtonColorPickerExpanded(false);
+    };
+
     return (
         <>
             <div className='flex w-full font-sans text-black transition-colors ease-in-out' data-testid={'header-card-container'} style={wrapperStyle()}>
@@ -405,23 +410,10 @@ export function HeaderCard({alignment,
                             (layout !== 'split' && {
                                 title: 'Image',
                                 customContent: (
-                                    <button
-                                        className={clsx(
-                                            `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
-                                            showBackgroundImage && 'outline outline-2 outline-green'
-                                        )}
-                                        data-testid="header-background-image-toggle"
-                                        title="Image"
-                                        type="button"
-                                        onClick={() => {
-                                            handleShowBackgroundImage();
-                                            setBackgroundColorPickerExpanded(true);
-                                            setButtonColorPickerExpanded(false);
-                                        }}
-                                    >
-                                        <ImgBgIcon className="size-[1.4rem]" />
-                                        <Tooltip label='Image' />
-                                    </button>
+                                    <ImageUploadSwatch
+                                        showBackgroundImage={showBackgroundImage}
+                                        onClickHandler={onBackgroundImageClickHandler}
+                                    />
                                 )
                             }),
                             {title: 'Black', hex: '#000000'},

From 3cf445208379d706050e93772ef61f06182ecb21 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 20 Feb 2025 16:09:30 +0900
Subject: [PATCH 04/41] Fixed image upload related tests and bugs

---
 .../src/components/ui/ColorPicker.jsx         | 27 ++++++++++++++--
 .../ui/cards/HeaderCard/v2/HeaderCard.jsx     |  2 +-
 .../test/e2e/cards/header-card.test.js        | 28 +++++++++--------
 .../test/e2e/cards/signup-card.test.js        | 31 +++++++++++++------
 .../test/utils/background-color-helper.js     | 20 ++++++------
 5 files changed, 71 insertions(+), 37 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 66009e73f3..efc6da9379 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -141,6 +141,27 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     const [showChildren, setShowChildren] = useState(false);
     const popoverRef = useRef(null);
     
+    // const stopPropagation = useCallback((e) => {
+    //     e.stopPropagation();
+    //     e.preventDefault();
+    // }, []);
+
+    const handleDocumentClick = useCallback((event) => {
+        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    }, []);
+
+    // Add and remove document click listener based on isOpen
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('click', handleDocumentClick);
+            return () => {
+                document.removeEventListener('click', handleDocumentClick);
+            };
+        }
+    }, [isOpen, handleDocumentClick]);
+
     const stopPropagation = useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -230,10 +251,10 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                                     <ColorSwatch 
                                         key={swatch.title} 
                                         isSelected={selectedSwatch === swatch.title} 
-                                        onSelect={(value) => {
-                                            onSwatchChange(value);
+                                        onSelect={(val) => {
+                                            onSwatchChange(val);
                                             setShowColorPicker(false);
-                                            setIsOpen(false);
+                                            // setIsOpen(false);
                                         }} 
                                         {...swatch} 
                                     />
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 04ff8eec30..109fbd6cb6 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -458,7 +458,7 @@ export function HeaderCard({alignment,
                                 openImageEditor={openImageEditor}
                                 placeholderRef={imageDragHandler?.setRef}
                                 progress={progress}
-                                setFileInputRef={setFileInputRef}
+                                setFileInputRef={setFileInputRef} // Ensure ref is properly passed
                                 size='xsmall'
                                 src={backgroundImageSrc}
                                 stacked={true}
diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
index 15d75e6419..6e8f750fed 100644
--- a/packages/koenig-lexical/test/e2e/cards/header-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
@@ -187,8 +187,8 @@ test.describe('Header card V1', async () => {
         await createHeaderCard({page});
 
         // Check that the default size is small
-        await expect(page.getByLabel('S')).toHaveClass(/ bg-grey-150 /);
-        await expect(page.getByLabel('M')).not.toHaveClass(/ bg-grey-150 /);
+        await expect(page.getByLabel('S')).toHaveClass(/ shadow-xs /);
+        await expect(page.getByLabel('M')).not.toHaveClass(/ shadow-xs /);
 
         // Get height of the card
         const box = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -196,7 +196,7 @@ test.describe('Header card V1', async () => {
 
         // Click on the medium button
         await page.getByLabel('M').click();
-        await expect(page.getByLabel('M')).toHaveClass(/ bg-grey-150 /);
+        await expect(page.getByLabel('M')).toHaveClass(/ shadow-xs /);
 
         // Check that the height has changed
         const box2 = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -207,7 +207,7 @@ test.describe('Header card V1', async () => {
         // Switch to large
         const largeButton = page.locator('[aria-label="L"]');
         await largeButton.click();
-        await expect(largeButton).toHaveClass(/ bg-grey-150 /);
+        await expect(largeButton).toHaveClass(/ shadow-xs /);
 
         // Check that the height has changed
         const box3 = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -248,8 +248,9 @@ test.describe('Header card V1', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        // Click data-testid="background-image-color-button"
-        await page.click('[data-testid="background-image-color-button"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'background-image-color-button'});
+        // click on text saying Click to upload background image
+        await page.getByText('Click to upload background image').click();
 
         // Set files
         const fileChooser = await fileChooserPromise;
@@ -570,12 +571,12 @@ test.describe('Header card V2', () => {
     test('can switch between background image and color', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
         await createHeaderCard({page, version: 2});
-        // Choose an image
 
+        // Choose an image
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await page.click('[data-testid="header-background-image-toggle"]');
-
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
 
@@ -585,15 +586,16 @@ test.describe('Header card V2', () => {
 
         // Switch to a color swatch
 
-        await page.click('[data-testid="header-background-color"] button[title="Black"]');
+        // await page.click('[data-testid="header-background-color"] button[title="Black"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', findByColorTitle: 'Black'});
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
 
-        // Switch back to the image
+        // // Switch back to the image
 
-        await page.click('[data-testid="header-background-image-toggle"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-testid="media-upload-setting"]')).toBeVisible();
@@ -601,7 +603,7 @@ test.describe('Header card V2', () => {
 
         // Open the color picker
 
-        await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', customColor: '000000'});
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
index 86150b7470..802a91e44a 100644
--- a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
@@ -255,7 +255,8 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await page.click('[data-testid="signup-background-image-toggle"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
 
         // Set files
         const fileChooser = await fileChooserPromise;
@@ -295,7 +296,8 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await page.click('[data-testid="signup-background-image-toggle"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
 
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
@@ -306,23 +308,24 @@ test.describe('Signup card', async () => {
 
         // Switch to a color swatch
 
-        await page.click('[data-testid="signup-background-color"] button[title="Black"]');
+        // await page.click('[data-testid="signup-background-color"] button[title="Black"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', findByColorTitle: 'Black'});
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
 
-        // Switch back to the image
+        // // Switch back to the image
 
-        await page.click('[data-testid="signup-background-image-toggle"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-testid="media-upload-setting"]')).toBeVisible();
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
 
-        // Open the color picker
+        // // Open the color picker
 
-        await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', customColor: '000000'});
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
@@ -337,7 +340,8 @@ test.describe('Signup card', async () => {
 
         // Text colour is updated based on the background colour
 
-        await page.click('[data-testid="signup-background-color"] button[title="Grey"]');
+        // await page.click('[data-testid="signup-background-color"] button[title="Grey"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', findByColorTitle: 'Grey'});
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(240, 240, 240)');
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('color', 'rgb(0, 0, 0)');
@@ -346,8 +350,9 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await page.click('[data-testid="signup-background-image-toggle"]');
-
+        // await page.click('[data-testid="signup-background-image-toggle"]');
+        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
 
@@ -356,6 +361,8 @@ test.describe('Signup card', async () => {
 
         // When switching to split layout, text colour is set based on the background colour
 
+        await page.locator('[data-testid="settings-panel"]').click();
+
         await page.locator('[data-testid="signup-layout-split"]').click();
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
@@ -364,6 +371,10 @@ test.describe('Signup card', async () => {
 
         // When switching back from split layout, text colour is set based on the background colour
 
+        // data-testid="settings-panel"
+
+        await page.locator('[data-testid="settings-panel"]').click(); // click here to close the colour swatch
+
         await page.locator('[data-testid="signup-layout-wide"]').click();
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);
diff --git a/packages/koenig-lexical/test/utils/background-color-helper.js b/packages/koenig-lexical/test/utils/background-color-helper.js
index c2a84437ae..9f7cd0b5d7 100644
--- a/packages/koenig-lexical/test/utils/background-color-helper.js
+++ b/packages/koenig-lexical/test/utils/background-color-helper.js
@@ -1,9 +1,9 @@
-// import {expect} from '@playwright/test';
-
-export async function cardBackgroundColorSettings(page, {cardColorPickerTestId, customColor, colorTestId, findByColorTitle}) {
-    const colorSetting = page.locator(`[data-testid="${cardColorPickerTestId}"]`);
-    const colorButton = colorSetting.locator('button');
-    await colorButton.click();
+export async function cardBackgroundColorSettings(page, {cardColorPickerTestId, customColor, colorTestId, findByColorTitle, imageUploadId, fireColorSetting = true}) {
+    if (fireColorSetting) {
+        const colorSetting = page.locator(`[data-testid="${cardColorPickerTestId}"]`);
+        const colorButton = colorSetting.locator('button');
+        await colorButton.click();
+    }
 
     if (findByColorTitle) {
         const colorTitle = page.locator(`[title="${findByColorTitle}"]`);
@@ -17,12 +17,12 @@ export async function cardBackgroundColorSettings(page, {cardColorPickerTestId,
         await colorInput.click({clickCount: 3});
         await colorInput.type(customColor);
     }
+
     if (colorTestId) {
         await page.locator(`[data-test-id="${colorTestId}"]`).click();
     }
-    // await page.locator(`[data-test-id="${colorTestId}"]`).click();
 
-    // Ensure the expected background color is applied
-    // const coloredCard = page.locator(`[data-testid="${expectedBgTestId}"]`);
-    // await expect(coloredCard).toBeVisible();
+    if (imageUploadId) {
+        await page.locator(`[data-testid="${imageUploadId}"]`).click();
+    }
 }

From 6538fbc86abb60daf11b5a701b44cb9d726187f8 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 20 Feb 2025 18:48:49 +0900
Subject: [PATCH 05/41] Updated CTA Card tests

---
 .../components/ui/cards/CallToActionCard.jsx  |  1 +
 .../test/e2e/cards/cta-card.test.js           | 55 ++++++++-----------
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index c92c8a00dc..5d3abc7c80 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -145,6 +145,7 @@ export function CallToActionCard({
             {/* Color picker */}
             <ColorOptionSetting
                 buttons={callToActionColorPicker}
+                dataTestId={'cta-background-color-picker'}
                 label='Background'
                 selectedName={color}
                 onClick={handleColorChange}
diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
index 26e05e34a0..8f471bf451 100644
--- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -1,5 +1,6 @@
 import path from 'path';
 import {assertHTML, focusEditor, getEditorStateJSON, html, initialize, insertCard} from '../../utils/e2e';
+import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -118,37 +119,30 @@ test.describe('Call To Action Card', async () => {
         `, {ignoreCardContents: true});
     });
 
-    test('can toggle button on card', async function () {
+    test('button and button settings is visible by default', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
-
-        await page.click('[data-testid="button-settings"]');
-
-        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(false);
+        expect(await page.isVisible('[data-testid="cta-button-color"]')).toBe(true);
+        expect(await page.isVisible('[data-testid="button-text"]')).toBe(true);
+        expect(await page.isVisible('[data-testid="button-url"]')).toBe(true);
     });
 
-    test('button settings expands and collapses when toggled', async function () {
+    test('can toggle button on card and expands settings', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
+        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
         await page.click('[data-testid="button-settings"]');
-        // determine if settings are open byy looking for cta-button-color, button-text & button-url
-        expect(await page.isVisible('[data-testid="cta-button-color"]')).toBe(true);
-        expect(await page.isVisible('[data-testid="button-text"]')).toBe(true);
-        expect(await page.isVisible('[data-testid="button-url"]')).toBe(true);
+        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(false);
 
         await page.click('[data-testid="button-settings"]');
-        // determine if settings are closed by looking for cta-button-color, button-text & button-url
-        expect(await page.isVisible('[data-testid="cta-button-color"]')).toBe(false);
-        expect(await page.isVisible('[data-testid="button-text"]')).toBe(false);
-        expect(await page.isVisible('[data-testid="button-url"]')).toBe(false);
+
+        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
     });
 
     test('can set button text', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         await page.fill('[data-testid="button-text"]', 'Click me');
         expect(await page.textContent('[data-testid="cta-button"]')).toBe('Click me');
     });
@@ -156,7 +150,6 @@ test.describe('Call To Action Card', async () => {
     test('can set button url', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         await page.fill('[data-testid="button-url"]', 'https://example.com/somepost');
         const buttonContainer = await page.$('[data-test-cta-button-current-url]');
         const currentUrl = await buttonContainer.getAttribute('data-test-cta-button-current-url');
@@ -167,7 +160,6 @@ test.describe('Call To Action Card', async () => {
     test('suggested urls display', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
 
         const buttonTextInput = await page.getByTestId('button-url');
         await expect(buttonTextInput).toHaveValue('');
@@ -188,7 +180,6 @@ test.describe('Call To Action Card', async () => {
     test('button doesnt disappear when toggled, has text, has url and loses focus', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         await page.fill('[data-testid="button-text"]', 'Click me');
         await page.fill('[data-testid="button-url"]', 'https://example.com/somepost');
         expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
@@ -217,16 +208,15 @@ test.describe('Call To Action Card', async () => {
     test('default button colour is accent', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         expect(await page.getAttribute('[data-testid="cta-button"]', 'class')).toContain('bg-accent');
     });
 
     test('can change button colour to black', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         // find the parent element cta-button-color and select child button with title=black
-        await page.click('[data-testid="cta-button-color"] button[title="Black"]');
+        // await page.click('[data-testid="cta-button-color"] button[title="Black"]');
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'cta-button-color', findByColorTitle: 'Black'});
         // check if the button has style="background-color: rgb(0, 0, 0);"
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(0, 0, 0);');
     });
@@ -234,9 +224,8 @@ test.describe('Call To Action Card', async () => {
     test('can change button colour to grey', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         // find the parent element cta-button-color and select child button with title=white
-        await page.click('[data-testid="cta-button-color"] button[title="Grey"]');
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'cta-button-color', findByColorTitle: 'Grey'});
         // check if the button has style="background-color: rgb(255, 255, 255);"
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(240, 240, 240);');
     });
@@ -244,19 +233,16 @@ test.describe('Call To Action Card', async () => {
     test('can use colour picker to change button colour', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
-        await page.click('button[aria-label="Pick color"]');
-        await page.fill('input[aria-label="Color value"]', 'ff0000');
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'cta-button-color', customColor: 'ff0000'});
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(255, 0, 0);');
     });
 
     test('button text colour changes with button colour', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        await page.click('[data-testid="button-settings"]');
         await page.fill('[data-testid="button-text"]', 'Click me');
-        await page.click('button[aria-label="Pick color"]');
-        await page.fill('input[aria-label="Color value"]', 'FFFFFF');
+
+        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'cta-button-color', customColor: 'FFFFFF'});
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('color: rgb(255, 255, 255);');
 
         // change button colour to black
@@ -326,15 +312,18 @@ test.describe('Call To Action Card', async () => {
             {testId: 'color-picker-green', expectedClass: 'bg-green'},
             {testId: 'color-picker-blue', expectedClass: 'bg-blue'},
             {testId: 'color-picker-yellow', expectedClass: 'bg-yellow'},
-            {testId: 'color-picker-red', expectedClass: 'bg-red'}
+            {testId: 'color-picker-red', expectedClass: 'bg-red'},
+            {testId: 'color-picker-pink', expectedClass: 'bg-pink'},
+            {testId: 'color-picker-purple', expectedClass: 'bg-purple'}
         ];
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
 
         const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child';
-        await expect(page.locator(firstChildSelector)).not.toHaveClass(/bg-(green|blue|yellow|red)/); // shouldn't have any of the classes yet
+        await expect(page.locator(firstChildSelector)).not.toHaveClass(/bg-(green|blue|yellow|red|pink|purple)/); // shouldn't have any of the classes yet
         for (const color of colors) {
-            await page.click(`[data-test-id="${color.testId}"]`);
+            await page.locator('[data-testid="cta-background-color-picker"] button').click();
+            await page.locator(`[data-test-id="${color.testId}"]`).click();
             await expect(page.locator(firstChildSelector)).toHaveClass(new RegExp(color.expectedClass));
         }
     });

From a762a4e8cae897fa6f12ead0826bf6882e12ee24 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 20 Feb 2025 19:01:00 +0900
Subject: [PATCH 06/41] Fixed CTA Node tests

---
 .../kg-default-nodes/test/nodes/call-to-action.test.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/kg-default-nodes/test/nodes/call-to-action.test.js b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
index 29b8638b03..81520a9f78 100644
--- a/packages/kg-default-nodes/test/nodes/call-to-action.test.js
+++ b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
@@ -83,11 +83,11 @@ describe('CallToActionNode', function () {
             callToActionNode.textValue = 'This is a cool advertisement';
             callToActionNode.textValue.should.equal('This is a cool advertisement');
 
-            callToActionNode.showButton.should.equal(false);
-            callToActionNode.showButton = true;
             callToActionNode.showButton.should.equal(true);
+            callToActionNode.showButton = false;
+            callToActionNode.showButton.should.equal(false);
 
-            callToActionNode.buttonText.should.equal('');
+            callToActionNode.buttonText.should.equal('Learn more');
             callToActionNode.buttonText = 'click me';
             callToActionNode.buttonText.should.equal('click me');
 
@@ -99,7 +99,7 @@ describe('CallToActionNode', function () {
             callToActionNode.sponsorLabel = 'This post is brought to you by our sponsors';
             callToActionNode.sponsorLabel.should.equal('This post is brought to you by our sponsors');
 
-            callToActionNode.buttonColor.should.equal('');
+            callToActionNode.buttonColor.should.equal('black');
             callToActionNode.buttonColor = 'red';
             callToActionNode.buttonColor.should.equal('red');
 

From d691484db983287e9f07e80777201f8f8f3eec9c Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 20 Feb 2025 19:09:31 +0900
Subject: [PATCH 07/41] Fixed linting

---
 .../koenig-lexical/src/components/ui/ColorOptionButtons.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
index 1fa756cfc0..33dd190cd2 100644
--- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
@@ -41,8 +41,8 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
                                         label={label}
                                         name={name}
                                         selectedName={selectedName}
-                                        onClick={(name) => {
-                                            onClick(name);
+                                        onClick={(title) => {
+                                            onClick(title);
                                             setIsOpen(false);
                                         }}
                                     />

From 2eaba1d958283845d2c78a0947bc2cc6cfd64f51 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 24 Feb 2025 15:48:31 +0900
Subject: [PATCH 08/41] Added button color as hex

---
 .../lib/nodes/call-to-action/CallToActionNode.js       |  4 ++--
 .../kg-default-nodes/test/nodes/call-to-action.test.js | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
index ee22c6b176..4feba96661 100644
--- a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
+++ b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
@@ -11,11 +11,11 @@ export class CallToActionNode extends generateDecoratorNode({
         {name: 'showButton', default: true},
         {name: 'buttonText', default: 'Learn more'},
         {name: 'buttonUrl', default: ''},
-        {name: 'buttonColor', default: 'black'},
+        {name: 'buttonColor', default: '#000000'}, // Where colour is customisable, we should use hex values
         {name: 'buttonTextColor', default: ''},
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
-        {name: 'backgroundColor', default: 'grey'},
+        {name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
         {name: 'hasImage', default: false},
         {name: 'imageUrl', default: ''},
         {name: 'imageWidth', default: null},
diff --git a/packages/kg-default-nodes/test/nodes/call-to-action.test.js b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
index 81520a9f78..4841bbfce3 100644
--- a/packages/kg-default-nodes/test/nodes/call-to-action.test.js
+++ b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
@@ -99,9 +99,9 @@ describe('CallToActionNode', function () {
             callToActionNode.sponsorLabel = 'This post is brought to you by our sponsors';
             callToActionNode.sponsorLabel.should.equal('This post is brought to you by our sponsors');
 
-            callToActionNode.buttonColor.should.equal('black');
-            callToActionNode.buttonColor = 'red';
-            callToActionNode.buttonColor.should.equal('red');
+            callToActionNode.buttonColor.should.equal('#000000');
+            callToActionNode.buttonColor = '#ffffff';
+            callToActionNode.buttonColor.should.equal('#ffffff');
 
             callToActionNode.buttonTextColor.should.equal('');
             callToActionNode.buttonTextColor = 'black';
@@ -112,8 +112,8 @@ describe('CallToActionNode', function () {
             callToActionNode.hasSponsorLabel.should.equal(false);
 
             callToActionNode.backgroundColor.should.equal('grey');
-            callToActionNode.backgroundColor = '#654321';
-            callToActionNode.backgroundColor.should.equal('#654321');
+            callToActionNode.backgroundColor = 'red';
+            callToActionNode.backgroundColor.should.equal('red');
 
             callToActionNode.hasImage.should.equal(false);
             callToActionNode.hasImage = true;

From cc9490a5673de0fb74fc900b788f4a5cc1f2160e Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 24 Feb 2025 16:55:59 +0900
Subject: [PATCH 09/41] Added drag drop to CTA card img button

---
 .../components/ui/cards/CallToActionCard.jsx  | 11 +++++--
 .../src/components/ui/cards/SignupCard.jsx    | 30 +++++++------------
 .../src/nodes/CallToActionNodeComponent.jsx   |  8 ++++-
 .../test/e2e/cards/cta-card.test.js           | 19 +++++++++++-
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 5d3abc7c80..09882bfd11 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -105,7 +105,8 @@ export function CallToActionCard({
     updateHasSponsorLabel = () => {},
     updateLayout = () => {},
     updateShowButton = () => {},
-    toggleVisibility = () => {}
+    toggleVisibility = () => {},
+    imageDragHandler = () => {}
 }) {
     const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false);
 
@@ -163,8 +164,11 @@ export function CallToActionCard({
                 borderStyle={'rounded'}
                 desc='Upload'
                 icon='file'
+                isDraggedOver={imageDragHandler.isDraggedOver}
+                isLoading={imageDragHandler.isLoading}
                 label='Image'
                 mimeTypes={['image/*']}
+                placeholderRef={imageDragHandler.setRef}
                 setFileInputRef={setFileInputRef}
                 src={imageSrc}
                 type='button'
@@ -278,6 +282,7 @@ export function CallToActionCard({
                                     layout === 'immersive' ? 'h-auto w-full' : 'aspect-square w-16 object-cover',
                                     'rounded-md'
                                 )}
+                                data-testId="cta-card-image"
                                 src={imageSrc}
                             />
                         </div>
@@ -367,7 +372,8 @@ CallToActionCard.propTypes = {
     sponsorLabelHtmlEditor: PropTypes.object,
     sponsorLabelHtmlEditorInitialState: PropTypes.object,
     visibilityOptions: PropTypes.object,
-    toggleVisibility: PropTypes.func
+    toggleVisibility: PropTypes.func,
+    imageUploadHandler: PropTypes.func
 };
 
 CallToActionCard.defaultProps = {
@@ -389,6 +395,7 @@ CallToActionCard.defaultProps = {
     onFileChange: () => {},
     setFileInputRef: () => {},
     onRemoveMedia: () => {},
+    imageDragHandler: () => {},
     visibilityOptions: PropTypes.object,
     toggleVisibility: PropTypes.func
 };
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index 7443f04516..1b35cb63a6 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -1,6 +1,5 @@
 import CenterAlignIcon from '../../../assets/icons/kg-align-center.svg?react';
 import ExpandIcon from '../../../assets/icons/kg-expand.svg?react';
-import ImgBgIcon from '../../../assets/icons/kg-img-bg.svg?react';
 import ImgFullIcon from '../../../assets/icons/kg-img-full.svg?react';
 import ImgRegularIcon from '../../../assets/icons/kg-img-regular.svg?react';
 import ImgWideIcon from '../../../assets/icons/kg-img-wide.svg?react';
@@ -16,10 +15,10 @@ import {ButtonGroupSetting, ColorPickerSetting, InputSetting, MediaUploadSetting
 import {Color, textColorForBackgroundColor} from '@tryghost/color-utils';
 import {FastAverageColor} from 'fast-average-color';
 import {IconButton} from '../IconButton';
+import {ImageUploadSwatch} from '../ImageUploadSwatch';
 import {MediaUploader} from '../MediaUploader';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
 import {SubscribeForm} from '../SubscribeForm';
-import {Tooltip} from '../Tooltip';
 import {getAccentColor} from '../../../utils/getAccentColor';
 import {isEditorEmpty} from '../../../utils/isEditorEmpty';
 
@@ -208,6 +207,12 @@ export function SignupCard({alignment,
 
     const correctedBackgroundSize = backgroundSize === 'contain' && backgroundImageSrc ? 'contain' : 'cover';
 
+    const onBackgroundImageClickHandler = () => {
+        handleShowBackgroundImage();
+        setBackgroundColorPickerExpanded(true);
+        setButtonColorPickerExpanded(false);
+    };
+
     return (
         <>
             <div className='flex w-full font-sans text-black transition-colors ease-in-out' data-testid={'signup-card-container'} style={wrapperStyle()}>
@@ -403,23 +408,10 @@ export function SignupCard({alignment,
                             (layout !== 'split' && {
                                 title: 'Image',
                                 customContent: (
-                                    <button
-                                        className={clsx(
-                                            `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
-                                            showBackgroundImage && 'outline outline-2 outline-green'
-                                        )}
-                                        data-testid="signup-background-image-toggle"
-                                        title="Image"
-                                        type="button"
-                                        onClick={() => {
-                                            handleShowBackgroundImage();
-                                            setBackgroundColorPickerExpanded(true);
-                                            setButtonColorPickerExpanded(false);
-                                        }}
-                                    >
-                                        <ImgBgIcon className="size-[1.4rem]" />
-                                        <Tooltip label='Image' />
-                                    </button>
+                                    <ImageUploadSwatch
+                                        showBackgroundImage={showBackgroundImage}
+                                        onClickHandler={onBackgroundImageClickHandler}
+                                    />
                                 )
                             }),
                             {title: 'Grey', hex: '#F0F0F0'},
diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
index b441153870..90514e91c0 100644
--- a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
+++ b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
@@ -1,6 +1,7 @@
 import CardContext from '../context/CardContext';
 import KoenigComposerContext from '../context/KoenigComposerContext.jsx';
 import React, {useRef} from 'react';
+import useFileDragAndDrop from '../hooks/useFileDragAndDrop';
 import {$getNodeByKey} from 'lexical';
 import {ActionToolbar} from '../components/ui/ActionToolbar.jsx';
 import {CallToActionCard} from '../components/ui/cards/CallToActionCard.jsx';
@@ -25,7 +26,6 @@ export const CallToActionNodeComponent = ({
     htmlEditor,
     htmlEditorInitialState,
     buttonTextColor,
-    href,
     sponsorLabelHtmlEditor,
     sponsorLabelHtmlEditorInitialState
 }) => {
@@ -33,6 +33,7 @@ export const CallToActionNodeComponent = ({
     const {isEditing, isSelected, setEditing} = React.useContext(CardContext);
     const {fileUploader, cardConfig} = React.useContext(KoenigComposerContext);
     const [showSnippetToolbar, setShowSnippetToolbar] = React.useState(false);
+    const imageDragHandler = useFileDragAndDrop({handleDrop: handleImageDrop});
 
     const {visibilityOptions, toggleVisibility} = useVisibilityToggle(editor, nodeKey, cardConfig);
 
@@ -127,6 +128,10 @@ export const CallToActionNodeComponent = ({
         });
     };
 
+    async function handleImageDrop(files) {
+        await handleImageChange(files);
+    }
+
     React.useEffect(() => {
         htmlEditor.setEditable(isEditing);
     }, [isEditing, htmlEditor]);
@@ -145,6 +150,7 @@ export const CallToActionNodeComponent = ({
                 hasSponsorLabel={hasSponsorLabel}
                 htmlEditor={htmlEditor}
                 htmlEditorInitialState={htmlEditorInitialState}
+                imageDragHandler={imageDragHandler}
                 imageSrc={imageUrl}
                 imageUploader={imageUploader}
                 isEditing={isEditing}
diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
index 8f471bf451..4963f1fddb 100644
--- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -1,5 +1,5 @@
 import path from 'path';
-import {assertHTML, focusEditor, getEditorStateJSON, html, initialize, insertCard} from '../../utils/e2e';
+import {assertHTML, createDataTransfer, focusEditor, getEditorStateJSON, html, initialize, insertCard} from '../../utils/e2e';
 import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
@@ -348,6 +348,23 @@ test.describe('Call To Action Card', async () => {
         await expect(imgLocator).not.toBeVisible();
     });
 
+    test('can drag and drop image over upload button', async function () {
+        const filePath = path.relative(process.cwd(), __dirname + '/../fixtures/large-image.png');
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+
+        // Create and dispatch data transfer
+        const dataTransfer = await createDataTransfer(page, [{filePath, fileName: 'large-image.png', fileType: 'image/png'}]);
+        await page.getByTestId('media-upload-placeholder').dispatchEvent('dragover', {dataTransfer});
+        // Dragover text should be visible
+        // check that "Drop it like it's hot" is visible
+        await expect(await page.locator('[data-kg-card-drag-text="true"]')).toBeVisible();
+
+        await page.getByTestId('media-upload-placeholder').dispatchEvent('drop', {dataTransfer});
+
+        await expect (await page.getByTestId('cta-card-image')).toBeVisible();
+    });
+
     test('default layout is minimal', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});

From 32a3ee992a58fde1a0be819c25da3827d29960cf Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 13:10:33 +0900
Subject: [PATCH 10/41] Added img icon to color picker

---
 .../koenig-lexical/src/components/ui/ColorPicker.jsx     | 9 +++++++++
 .../src/components/ui/cards/SignupCard.jsx               | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index efc6da9379..2aae69f383 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -1,4 +1,5 @@
 import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
+import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
 import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
@@ -181,6 +182,9 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
+    } else if (value === 'image') {
+        backgroundColor = 'transparent';
+        selectedSwatch = swatches.find(swatch => swatch.image)?.title;
     } else if (value === 'transparent') {
         backgroundColor = 'white';
         selectedSwatch = swatches.find(swatch => swatch.transparent)?.title;
@@ -219,6 +223,11 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     className="block size-full rounded-full border-2 border-white"
                     style={{backgroundColor}}
                 >
+                    {
+                        value === 'image' && (
+                            <ImgBgIcon/>
+                        )
+                    }
                     {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                 </span>
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index 1b35cb63a6..78fda88ef3 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -418,7 +418,7 @@ export function SignupCard({alignment,
                             {title: 'Black', hex: '#000000'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));

From efc5d4aeefe92bb73184697c6b3f2873f40bc720 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 13:35:45 +0900
Subject: [PATCH 11/41] Revert "Added img icon to color picker"

This reverts commit 32a3ee992a58fde1a0be819c25da3827d29960cf.
---
 .../koenig-lexical/src/components/ui/ColorPicker.jsx     | 9 ---------
 .../src/components/ui/cards/SignupCard.jsx               | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 2aae69f383..efc6da9379 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -1,5 +1,4 @@
 import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
-import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
 import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
@@ -182,9 +181,6 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
-    } else if (value === 'image') {
-        backgroundColor = 'transparent';
-        selectedSwatch = swatches.find(swatch => swatch.image)?.title;
     } else if (value === 'transparent') {
         backgroundColor = 'white';
         selectedSwatch = swatches.find(swatch => swatch.transparent)?.title;
@@ -223,11 +219,6 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     className="block size-full rounded-full border-2 border-white"
                     style={{backgroundColor}}
                 >
-                    {
-                        value === 'image' && (
-                            <ImgBgIcon/>
-                        )
-                    }
                     {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                 </span>
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index 78fda88ef3..1b35cb63a6 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -418,7 +418,7 @@ export function SignupCard({alignment,
                             {title: 'Black', hex: '#000000'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));

From 62adaf27bf725d5580b73dfc9930d31df690dd0a Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 13:57:16 +0900
Subject: [PATCH 12/41] Fixed swatch test

---
 .../koenig-lexical/src/components/ui/ImageUploadSwatch.jsx   | 5 +++--
 .../koenig-lexical/src/components/ui/cards/SignupCard.jsx    | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx b/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx
index 45025ad7ee..114cb672ec 100644
--- a/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx
+++ b/packages/koenig-lexical/src/components/ui/ImageUploadSwatch.jsx
@@ -4,7 +4,8 @@ import {Tooltip} from './Tooltip';
 
 export const ImageUploadSwatch = ({
     showBackgroundImage,
-    onClickHandler
+    onClickHandler,
+    dataTestId
 }) => {
     return (
         <button
@@ -12,7 +13,7 @@ export const ImageUploadSwatch = ({
                 `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
                 showBackgroundImage && 'outline outline-2 outline-green'
             )}
-            data-testid="header-background-image-toggle"
+            data-testid={dataTestId}
             title="Image"
             type="button"
             onClick={onClickHandler}
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index 1b35cb63a6..e72f8693ce 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -409,6 +409,7 @@ export function SignupCard({alignment,
                                 title: 'Image',
                                 customContent: (
                                     <ImageUploadSwatch
+                                        dataTestId='signup-background-image-toggle'
                                         showBackgroundImage={showBackgroundImage}
                                         onClickHandler={onBackgroundImageClickHandler}
                                     />

From 29742dedc01bb602ac031d6f8dff3b2e844ad71d Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 13:57:43 +0900
Subject: [PATCH 13/41] Revert "Revert "Added img icon to color picker""

This reverts commit efc5d4aeefe92bb73184697c6b3f2873f40bc720.
---
 .../koenig-lexical/src/components/ui/ColorPicker.jsx     | 9 +++++++++
 .../src/components/ui/cards/SignupCard.jsx               | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index efc6da9379..2aae69f383 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -1,4 +1,5 @@
 import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
+import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
 import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
@@ -181,6 +182,9 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
+    } else if (value === 'image') {
+        backgroundColor = 'transparent';
+        selectedSwatch = swatches.find(swatch => swatch.image)?.title;
     } else if (value === 'transparent') {
         backgroundColor = 'white';
         selectedSwatch = swatches.find(swatch => swatch.transparent)?.title;
@@ -219,6 +223,11 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     className="block size-full rounded-full border-2 border-white"
                     style={{backgroundColor}}
                 >
+                    {
+                        value === 'image' && (
+                            <ImgBgIcon/>
+                        )
+                    }
                     {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                 </span>
             </button>
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index e72f8693ce..3a6c7e8b41 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -419,7 +419,7 @@ export function SignupCard({alignment,
                             {title: 'Black', hex: '#000000'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));

From 51f4a98ff9c2616ccb2bae82d5518ee46be3bd87 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 13:59:25 +0900
Subject: [PATCH 14/41] Added test for finding img icon

---
 .../test/e2e/cards/signup-card.test.js        | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
index 802a91e44a..b40fc6f8d8 100644
--- a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
@@ -224,11 +224,6 @@ test.describe('Signup card', async () => {
         await focusEditor(page);
         await insertCard(page, {cardName: 'signup'});
 
-        // await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
-
-        // await page.fill('[data-testid="signup-background-color"] input', '');
-        // await page.keyboard.type('ff0000');
-
         await cardBackgroundColorSettings(page, {
             customColor: 'ff0000',
             cardColorPickerTestId: 'signup-background-color'
@@ -286,6 +281,37 @@ test.describe('Signup card', async () => {
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
     });
 
+    test('has image icon when background image is selected', async function (){
+        const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
+
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'signup'});
+
+        const fileChooserPromise = page.waitForEvent('filechooser');
+
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
+
+        // Set files
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles([filePath]);
+
+        // Check if it is set as a background image
+        await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);
+
+        // Check if it is also set as an image in the panel
+        await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
+
+        const parentLocator = page.locator('[data-testid="signup-background-color"]');
+
+        // Check if it contains the exact <path> element
+        const hasPath = await parentLocator.evaluate((parent) => {
+            return !!parent.querySelector(`path[fill="currentColor"][fill-rule="evenodd"][clip-rule="evenodd"][d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z"]`);
+        });
+
+        expect(hasPath).toBe(true);
+    });
+
     test('can switch between background image and color', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
 

From 49b1443d241126e02e3d74806b5be5699fa9a974 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 14:22:44 +0900
Subject: [PATCH 15/41] Added image icon on Header

---
 .../ui/cards/HeaderCard/v2/HeaderCard.jsx     |  1 +
 .../test/e2e/cards/header-card.test.js        | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 109fbd6cb6..8bb356d16d 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -411,6 +411,7 @@ export function HeaderCard({alignment,
                                 title: 'Image',
                                 customContent: (
                                     <ImageUploadSwatch
+                                        dataTestId={'header-background-image-toggle'}
                                         showBackgroundImage={showBackgroundImage}
                                         onClickHandler={onBackgroundImageClickHandler}
                                     />
diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
index 6e8f750fed..ff200b3884 100644
--- a/packages/koenig-lexical/test/e2e/cards/header-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
@@ -609,7 +609,33 @@ test.describe('Header card V2', () => {
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
     });
+    
+    test('has image icon when background image is selected', async function (){
+        const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
+        await createHeaderCard({page, version: 2});
+
+        // Choose an image
+        const fileChooserPromise = page.waitForEvent('filechooser');
+
+        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
+        await page.click('[data-testid="media-upload-placeholder"]');
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles([filePath]);
+
+        // Check if it is set as a background image
 
+        // Check if it is also set as an image in the panel
+        await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
+
+        const parentLocator = page.locator('[data-testid="header-background-color"]');
+
+        // Check if it contains the exact <path> element
+        const hasPath = await parentLocator.evaluate((parent) => {
+            return !!parent.querySelector(`path[fill="currentColor"][fill-rule="evenodd"][clip-rule="evenodd"][d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z"]`);
+        });
+
+        expect(hasPath).toBe(true);
+    });
     test('can add and remove background image in split layout', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
         const fileChooserPromise = page.waitForEvent('filechooser');

From d5b958dc59ef1e8b324db0cd3e42cf7aa52b6d06 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 14:30:49 +0900
Subject: [PATCH 16/41] Updated proptypes

---
 .../src/components/ui/cards/CallToActionCard.jsx               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 09882bfd11..75da8d29a0 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -373,7 +373,8 @@ CallToActionCard.propTypes = {
     sponsorLabelHtmlEditorInitialState: PropTypes.object,
     visibilityOptions: PropTypes.object,
     toggleVisibility: PropTypes.func,
-    imageUploadHandler: PropTypes.func
+    imageUploadHandler: PropTypes.func,
+    imageDragHandler: PropTypes.func
 };
 
 CallToActionCard.defaultProps = {

From 09bb0249bcc45b9167e5b22e70f51e91ce1afeb7 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 15:24:07 +0900
Subject: [PATCH 17/41] Added image string to headercard

---
 .../src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 8bb356d16d..3336c1b826 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -421,7 +421,7 @@ export function HeaderCard({alignment,
                             {title: 'Grey', hex: '#F0F0F0'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));

From 3cc4b08d57df896dde3590df707bc9e1ade4f44c Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Tue, 25 Feb 2025 15:39:14 +0900
Subject: [PATCH 18/41] Improved button icon test

---
 .../koenig-lexical/src/components/ui/ColorPicker.jsx  |  2 +-
 .../koenig-lexical/test/e2e/cards/header-card.test.js | 11 ++++-------
 .../koenig-lexical/test/e2e/cards/signup-card.test.js | 11 ++++-------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 2aae69f383..d4c60a8e59 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -200,7 +200,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     };
 
     return (
-        <div className="relative">
+        <div className="relative" data-testid="color-selector-button">
             <button 
                 className={`relative size-6 cursor-pointer rounded-full ${value ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
                 type="button"
diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
index ff200b3884..cb7ca3f33d 100644
--- a/packages/koenig-lexical/test/e2e/cards/header-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
@@ -627,14 +627,11 @@ test.describe('Header card V2', () => {
         // Check if it is also set as an image in the panel
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
 
-        const parentLocator = page.locator('[data-testid="header-background-color"]');
+        const parentLocator = page.locator('[data-testid="color-selector-button"]');
+        const iconHtml = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-[1.4rem]"><path fill="currentColor" fill-rule="evenodd" d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z" clip-rule="evenodd"></path><circle cx="8" cy="6" r="3" fill="currentColor"></circle></svg>';
+        const parentHtml = await parentLocator.innerHTML();
 
-        // Check if it contains the exact <path> element
-        const hasPath = await parentLocator.evaluate((parent) => {
-            return !!parent.querySelector(`path[fill="currentColor"][fill-rule="evenodd"][clip-rule="evenodd"][d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z"]`);
-        });
-
-        expect(hasPath).toBe(true);
+        await expect(parentHtml).toContain(iconHtml);
     });
     test('can add and remove background image in split layout', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
index b40fc6f8d8..c4461127c3 100644
--- a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
@@ -302,14 +302,11 @@ test.describe('Signup card', async () => {
         // Check if it is also set as an image in the panel
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
 
-        const parentLocator = page.locator('[data-testid="signup-background-color"]');
+        const parentLocator = page.locator('[data-testid="color-selector-button"]');
+        const iconHtml = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-[1.4rem]"><path fill="currentColor" fill-rule="evenodd" d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z" clip-rule="evenodd"></path><circle cx="8" cy="6" r="3" fill="currentColor"></circle></svg>';
+        const parentHtml = await parentLocator.innerHTML();
 
-        // Check if it contains the exact <path> element
-        const hasPath = await parentLocator.evaluate((parent) => {
-            return !!parent.querySelector(`path[fill="currentColor"][fill-rule="evenodd"][clip-rule="evenodd"][d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z"]`);
-        });
-
-        expect(hasPath).toBe(true);
+        await expect(parentHtml).toContain(iconHtml);
     });
 
     test('can switch between background image and color', async function () {

From 91860d24174b941f906dc283c154b5cea3b24e74 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 18:07:59 +0000
Subject: [PATCH 19/41] Fixed console errors when inserting CTA card

- `defaultProps` is deprecated in favor of native destructing assignment defaults in props object
- fixed `visibilityOptions` type
- fixed `imageDragHandler` type
- added new `selectedName` values of `'minimal'` and `'immersive'` to ButtonGroups.selectedName oneOf array
- Fixed error from incorrect data-testId casing
---
 .../src/components/ui/Button.jsx              | 27 +++++++++-------
 .../src/components/ui/ButtonGroup.jsx         |  2 +-
 .../src/components/ui/MediaPlaceholder.jsx    |  4 ---
 .../components/ui/cards/CallToActionCard.jsx  | 32 +++----------------
 4 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/Button.jsx b/packages/koenig-lexical/src/components/ui/Button.jsx
index fee62b4776..d1a183c313 100644
--- a/packages/koenig-lexical/src/components/ui/Button.jsx
+++ b/packages/koenig-lexical/src/components/ui/Button.jsx
@@ -2,7 +2,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import clsx from 'clsx';
 
-export function Button({color, dataTestId, href, size, width, rounded, shrink, value, placeholder, type = 'button', disabled = false, target, ...other}) {
+export function Button({
+    color = 'accent',
+    dataTestId,
+    href,
+    size = 'small',
+    width = 'regular',
+    rounded = true,
+    shrink = false,
+    value = '',
+    placeholder = 'Add button text',
+    type = 'button',
+    disabled = false,
+    target,
+    ...other
+}) {
     const Tag = href ? 'a' : 'button';
     const props = {
         type: href ? null : type,
@@ -55,14 +69,3 @@ Button.propTypes = {
     target: PropTypes.string,
     disabled: PropTypes.bool
 };
-
-Button.defaultProps = {
-    color: 'accent',
-    size: 'small',
-    width: 'regular',
-    rounded: true,
-    shrink: false,
-    value: '',
-    placeholder: 'Add button text',
-    disabled: false
-};
diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
index ad95b6d4bb..6074ef2a05 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
@@ -47,5 +47,5 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
 }
 
 ButtonGroup.propTypes = {
-    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list'])
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive'])
 };
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
index b1fe9fe312..48354f7790 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
@@ -151,7 +151,3 @@ MediaPlaceholder.propTypes = {
     type: PropTypes.oneOf(['image', 'button']),
     borderStyle: PropTypes.oneOf(['squared', 'rounded'])
 };
-
-MediaPlaceholder.defaultProps = {
-    borderStyle: 'squared'
-};
diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 75da8d29a0..c099eae70e 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -106,7 +106,7 @@ export function CallToActionCard({
     updateLayout = () => {},
     updateShowButton = () => {},
     toggleVisibility = () => {},
-    imageDragHandler = () => {}
+    imageDragHandler = {}
 }) {
     const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false);
 
@@ -282,7 +282,7 @@ export function CallToActionCard({
                                     layout === 'immersive' ? 'h-auto w-full' : 'aspect-square w-16 object-cover',
                                     'rounded-md'
                                 )}
-                                data-testId="cta-card-image"
+                                data-testid="cta-card-image"
                                 src={imageSrc}
                             />
                         </div>
@@ -371,32 +371,8 @@ CallToActionCard.propTypes = {
     onRemoveMedia: PropTypes.func,
     sponsorLabelHtmlEditor: PropTypes.object,
     sponsorLabelHtmlEditorInitialState: PropTypes.object,
-    visibilityOptions: PropTypes.object,
+    visibilityOptions: PropTypes.array,
     toggleVisibility: PropTypes.func,
     imageUploadHandler: PropTypes.func,
-    imageDragHandler: PropTypes.func
-};
-
-CallToActionCard.defaultProps = {
-    buttonText: '',
-    buttonUrl: '',
-    buttonColor: '',
-    buttonTextColor: '',
-    color: 'none',
-    hasSponsorLabel: false,
-    imageSrc: '',
-    isEditing: false,
-    layout: 'immersive',
-    showButton: true,
-    updateHasSponsorLabel: () => {},
-    updateShowButton: () => {},
-    updateLayout: () => {},
-    handleColorChange: () => {},
-    handleButtonColor: () => {},
-    onFileChange: () => {},
-    setFileInputRef: () => {},
-    onRemoveMedia: () => {},
-    imageDragHandler: () => {},
-    visibilityOptions: PropTypes.object,
-    toggleVisibility: PropTypes.func
+    imageDragHandler: PropTypes.object
 };

From 3ea83f263887735fd1972473d78e32ff577e5767 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 18:10:03 +0000
Subject: [PATCH 20/41] Cleaned up repetition in `<MediaPlaceholder>`

- large parts of the component were repeated in order to surround varying contents
- extracted contents to separate children to make behaviour clearer
- improved classes assignment to remove duplication of the button's class list
---
 .../src/components/ui/MediaPlaceholder.jsx    | 129 +++++++++---------
 1 file changed, 62 insertions(+), 67 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
index 48354f7790..9d57dfb05a 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
@@ -18,7 +18,7 @@ export const PLACEHOLDER_ICONS = {
 };
 
 export const CardText = ({text, type}) => (
-    <span 
+    <span
         className={clsx(
             'text-center font-sans text-sm font-semibold text-grey-800 transition-all group-hover:text-grey-800',
             type === 'button' && 'px-3 py-1'
@@ -29,13 +29,48 @@ export const CardText = ({text, type}) => (
     </span>
 );
 
+const ButtonContents = ({desc, hasErrors}) => {
+    if (hasErrors) {
+        return;
+    }
+    return <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>;
+};
+
+const StandardContents = ({desc, hasErrors, icon, size}) => {
+    if (size === 'xsmall' && hasErrors) {
+        return;
+    }
+
+    const Icon = PLACEHOLDER_ICONS[icon];
+
+    const iconClasses = clsx(
+        'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100',
+        size === 'large' && 'size-20 text-grey',
+        size === 'small' && 'size-14 text-grey',
+        size === 'xsmall' && 'size-5 text-grey-700',
+        !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey',
+        (size === 'xsmall' && desc) && 'mr-3'
+    );
+
+    const descriptionClasses = clsx(
+        'flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100',
+        size === 'xsmall' && '!mt-0',
+        size !== 'xsmall' && '!mt-4'
+    );
+
+    return <>
+        <Icon className={iconClasses} />
+        <p className={descriptionClasses}>{desc}</p>
+    </>;
+};
+
 export function MediaPlaceholder({
     desc,
     icon,
     filePicker,
     size,
     type,
-    borderStyle,
+    borderStyle = 'squared',
     isDraggedOver,
     errors = [],
     placeholderRef,
@@ -44,8 +79,6 @@ export function MediaPlaceholder({
     multiple = false,
     ...props
 }) {
-    const Icon = PLACEHOLDER_ICONS[icon];
-
     const containerClasses = clsx(
         'relative flex h-full items-center justify-center',
         type === 'button' ? 'rounded-lg bg-grey-100' : 'border bg-grey-50',
@@ -55,25 +88,10 @@ export function MediaPlaceholder({
         borderStyle !== 'rounded' && type !== 'button' && 'border-grey/20 dark:border-grey/10'
     );
 
-    const iconClasses = clsx(
-        'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100',
-        size === 'large' && 'size-20 text-grey',
-        size === 'small' && 'size-14 text-grey',
-        size === 'xsmall' && 'size-5 text-grey-700',
-        !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey',
-        (size === 'xsmall' && desc) && 'mr-3'
-    );
-
-    const descriptionClasses = clsx(
-        'flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100',
-        size === 'xsmall' && '!mt-0',
-        size !== 'xsmall' && '!mt-4'
-    );
-
     const buttonClasses = clsx(
         'group flex cursor-pointer select-none items-center justify-center',
-        size === 'xsmall' && 'p-4',
-        size !== 'xsmall' && 'flex-col p-20'
+        type === 'button' && 'px-3 py-1',
+        type !== 'button' && (size === 'xsmall' ? 'p-4' : 'flex-col p-20')
     );
 
     const errorClasses = clsx(
@@ -81,6 +99,16 @@ export function MediaPlaceholder({
         size !== 'xsmall' && 'mt-3 max-w-[65%]'
     );
 
+    const errorMessages = errors.map(error => (
+        <span
+            key={error.message}
+            className={errorClasses}
+            data-testid={errorDataTestId}
+        >
+            {error.message}
+        </span>
+    ));
+
     return (
         <div
             ref={placeholderRef}
@@ -92,52 +120,19 @@ export function MediaPlaceholder({
                 {isDraggedOver ? (
                     <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} type={type} />
                 ) : (
-                    <>
-                        {type === 'button' ? (
-                            <button 
-                                className="group flex cursor-pointer select-none items-center justify-center px-3 py-1" 
-                                name="placeholder-button" 
-                                type="button" 
-                                onClick={filePicker}
-                            >
-                                {!errors.length && (
-                                    <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>
-                                )}
-                                {errors.map(error => (
-                                    <span
-                                        key={error.message}
-                                        className={errorClasses}
-                                        data-testid={errorDataTestId}
-                                    >
-                                        {error.message}
-                                    </span>
-                                ))}
-                            </button>
-                        ) : (
-                            <button 
-                                className={buttonClasses}
-                                name="placeholder-button" 
-                                type="button" 
-                                onClick={filePicker}
-                            >
-                                {!(size === 'xsmall' && errors.length > 0) && (
-                                    <>
-                                        <Icon className={iconClasses} />
-                                        <p className={descriptionClasses}>{desc}</p>
-                                    </>
-                                )}
-                                {errors.map(error => (
-                                    <span
-                                        key={error.message}
-                                        className={errorClasses}
-                                        data-testid={errorDataTestId}
-                                    >
-                                        {error.message}
-                                    </span>
-                                ))}
-                            </button>
-                        )}
-                    </>
+                    <button
+                        className={buttonClasses}
+                        name="placeholder-button"
+                        type="button"
+                        onClick={filePicker}
+                    >
+                        {type === 'button'
+                            ? <ButtonContents desc={desc} hasErrors={errors.length > 0} />
+                            : <StandardContents desc={desc} hasErrors={errors.length > 0} icon={icon} size={size} />
+                        }
+
+                        {errorMessages}
+                    </button>
                 )}
             </div>
         </div>

From c9f3dbe6a59b6a425ce740d60cbc69d469f3cfde Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 21:52:11 +0000
Subject: [PATCH 21/41] Renamed call-to-action card test file

- match node/component naming
---
 .../e2e/cards/{cta-card.test.js => call-to-action-card.test.js}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/koenig-lexical/test/e2e/cards/{cta-card.test.js => call-to-action-card.test.js} (100%)

diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js
similarity index 100%
rename from packages/koenig-lexical/test/e2e/cards/cta-card.test.js
rename to packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js

From 60cb43a437745867914f86ba4afba179301b70df Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 21:54:18 +0000
Subject: [PATCH 22/41] Fixed errors coming from useMoveable

- in some cases the hook's callbacks would be called when the ref'd element had already been removed, added guard to avoid trying to set style in that case
---
 packages/koenig-lexical/src/hooks/useMovable.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/hooks/useMovable.js b/packages/koenig-lexical/src/hooks/useMovable.js
index 720246ebfe..b13149b592 100644
--- a/packages/koenig-lexical/src/hooks/useMovable.js
+++ b/packages/koenig-lexical/src/hooks/useMovable.js
@@ -125,12 +125,16 @@ export default function useMovable({adjustOnResize, adjustOnDrag} = {}) {
     // preventing clicks stops any event handlers that may otherwise result in the
     // movable element being closed when the drag finishes
     const disablePointerEvents = useCallback(() => {
-        ref.current.style.pointerEvents = 'none';
+        if (ref.current) {
+            ref.current.style.pointerEvents = 'none';
+        }
         window.addEventListener('click', cancelClick, {capture: true, passive: false});
     }, [ref, cancelClick]);
 
     const enablePointerEvents = useCallback(() => {
-        ref.current.style.pointerEvents = '';
+        if (ref.current) {
+            ref.current.style.pointerEvents = '';
+        }
         window.removeEventListener('click', cancelClick, {capture: true, passive: false});
     }, [ref, cancelClick]);
 

From acc7d53c99b2bc95d14a8727d87518a2297f6599 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 22:12:00 +0000
Subject: [PATCH 23/41] Fixed background color popover not closing on click
 outside

- interacting with other inputs or parts of the page did not close the color options popover as expected
- added an effect to add a window-level event capture in order to close the popover on any mousedown
  - does not prevent events on the clicked item from firing as it could lead to the UI feeling unresponsive
---
 .../src/components/ui/ColorOptionButtons.jsx  | 24 +++++++++++++++++--
 .../components/ui/cards/CallToActionCard.jsx  |  2 +-
 .../e2e/cards/call-to-action-card.test.js     | 16 +++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
index 33dd190cd2..fc104f7fb9 100644
--- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
@@ -5,12 +5,31 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
     const [isOpen, setIsOpen] = useState(false);
+    const componentRef = React.useRef(null);
+
     const selectedButton = buttons.find(button => button.name === selectedName);
 
+    // Close the swatch popover when clicking outside of it
+    React.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        const handleClickOutside = (event) => {
+            if (componentRef.current && !componentRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+
+        window.addEventListener('mousedown', handleClickOutside, {capture: true});
+        return () => window.removeEventListener('mousedown', handleClickOutside, {capture: true});
+    }, [isOpen, setIsOpen]);
+
     return (
-        <div className="relative">
+        <div ref={componentRef} className="relative">
             <button
                 className={`relative size-6 cursor-pointer rounded-full ${selectedName ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                data-testid="color-options-button"
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
             >
@@ -30,7 +49,7 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
 
             {/* Color options popover */}
             {isOpen && (
-                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow">
+                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow" data-testid="color-options-popover">
                     <div className="flex">
                         <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
                             {buttons.map(({label, name, color}) => (
@@ -38,6 +57,7 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
                                     <ColorButton
                                         key={`${name}-${label}`}
                                         color={color}
+                                        data-testid={`color-options-${name}-button`}
                                         label={label}
                                         name={name}
                                         selectedName={selectedName}
diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index c099eae70e..e96aa720ab 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -146,7 +146,7 @@ export function CallToActionCard({
             {/* Color picker */}
             <ColorOptionSetting
                 buttons={callToActionColorPicker}
-                dataTestId={'cta-background-color-picker'}
+                dataTestId='cta-background-color-picker'
                 label='Background'
                 selectedName={color}
                 onClick={handleColorChange}
diff --git a/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js b/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js
index 4963f1fddb..a3da9151c0 100644
--- a/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/call-to-action-card.test.js
@@ -328,6 +328,22 @@ test.describe('Call To Action Card', async () => {
         }
     });
 
+    test('background color popup closes on outside click', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+
+        const colorOptions = page.getByTestId('cta-background-color-picker');
+        await colorOptions.getByTestId('color-options-button').click();
+
+        await expect(colorOptions.getByTestId('color-options-popover')).toBeVisible();
+
+        const card = page.locator('[data-kg-card="call-to-action"]');
+        const settings = card.getByTestId('settings-panel');
+        await settings.getByTestId('media-upload-setting').click();
+
+        await expect(colorOptions.getByTestId('color-options-popover')).not.toBeVisible();
+    });
+
     test('can add and remove CTA Card image', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
 

From 69d31a8e08a605eb6a353f293d41dd832a719245 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 22:45:56 +0000
Subject: [PATCH 24/41] Improved close on click outside for button color picker

- extracted click-outside behaviour from `ColorOptionsButtons` to custom `useClickOutside` hook
- replaced click-outside behaviour in `ColorPicker` with `useClickOutside`
---
 .../src/components/ui/ColorOptionButtons.jsx  | 16 +-----
 .../src/components/ui/ColorPicker.jsx         | 53 ++++++-------------
 .../src/hooks/useClickOutside.js              | 18 +++++++
 3 files changed, 37 insertions(+), 50 deletions(-)
 create mode 100644 packages/koenig-lexical/src/hooks/useClickOutside.js

diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
index fc104f7fb9..a87fc620e0 100644
--- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
@@ -1,6 +1,7 @@
 import PlusIcon from '../../assets/icons/plus.svg?react';
 import React, {useState} from 'react';
 import {Tooltip} from './Tooltip';
+import {useClickOutside} from '../../hooks/useClickOutside';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
@@ -10,20 +11,7 @@ export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
     const selectedButton = buttons.find(button => button.name === selectedName);
 
     // Close the swatch popover when clicking outside of it
-    React.useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-
-        const handleClickOutside = (event) => {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-
-        window.addEventListener('mousedown', handleClickOutside, {capture: true});
-        return () => window.removeEventListener('mousedown', handleClickOutside, {capture: true});
-    }, [isOpen, setIsOpen]);
+    useClickOutside(isOpen, componentRef, () => setIsOpen(false));
 
     return (
         <div ref={componentRef} className="relative">
diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index d4c60a8e59..3aa8f596c5 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -6,6 +6,7 @@ import {Button} from './Button';
 import {HexColorInput, HexColorPicker} from 'react-colorful';
 import {Tooltip} from './Tooltip';
 import {getAccentColor} from '../../utils/getAccentColor';
+import {useClickOutside} from '../../hooks/useClickOutside';
 
 export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, children}) {
     // HexColorInput doesn't support adding a ref on the input itself
@@ -141,27 +142,8 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
     const [showColorPicker, setShowColorPicker] = useState(false);
     const [showChildren, setShowChildren] = useState(false);
     const popoverRef = useRef(null);
-    
-    // const stopPropagation = useCallback((e) => {
-    //     e.stopPropagation();
-    //     e.preventDefault();
-    // }, []);
-
-    const handleDocumentClick = useCallback((event) => {
-        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
-            setIsOpen(false);
-        }
-    }, []);
 
-    // Add and remove document click listener based on isOpen
-    useEffect(() => {
-        if (isOpen) {
-            document.addEventListener('click', handleDocumentClick);
-            return () => {
-                document.removeEventListener('click', handleDocumentClick);
-            };
-        }
-    }, [isOpen, handleDocumentClick]);
+    useClickOutside(isOpen, popoverRef, () => setIsOpen(false));
 
     const stopPropagation = useCallback((e) => {
         e.stopPropagation();
@@ -178,7 +160,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
 
     let backgroundColor = value;
     let selectedSwatch = swatches.find(swatch => swatch.hex === value)?.title;
-    
+
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
@@ -201,7 +183,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
 
     return (
         <div className="relative" data-testid="color-selector-button">
-            <button 
+            <button
                 className={`relative size-6 cursor-pointer rounded-full ${value ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
                 type="button"
                 onClick={() => {
@@ -219,7 +201,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                         maskComposite: 'exclude'
                     }} />
                 )}
-                <span 
+                <span
                     className="block size-full rounded-full border-2 border-white"
                     style={{backgroundColor}}
                 >
@@ -233,7 +215,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
             </button>
 
             {isOpen && (
-                <div 
+                <div
                     ref={popoverRef}
                     className={clsx(
                         'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-950',
@@ -244,7 +226,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     onTouchStart={stopPropagation}
                 >
                     {showColorPicker && (
-                        <ColorPicker 
+                        <ColorPicker
                             eyedropper={eyedropper}
                             hasTransparentOption={hasTransparentOption}
                             value={value}
@@ -255,25 +237,24 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                     <div className="flex justify-end gap-1">
                         <div className={`flex items-center gap-1`}>
                             {swatches.map(({customContent, ...swatch}) => (
-                                customContent ? 
-                                    <Fragment key={swatch.title}>{customContent}</Fragment> : 
-                                    <ColorSwatch 
-                                        key={swatch.title} 
-                                        isSelected={selectedSwatch === swatch.title} 
+                                customContent ?
+                                    <Fragment key={swatch.title}>{customContent}</Fragment> :
+                                    <ColorSwatch
+                                        key={swatch.title}
+                                        isSelected={selectedSwatch === swatch.title}
                                         onSelect={(val) => {
                                             onSwatchChange(val);
                                             setShowColorPicker(false);
-                                            // setIsOpen(false);
-                                        }} 
-                                        {...swatch} 
+                                        }}
+                                        {...swatch}
                                     />
                             ))}
                         </div>
                         <button
                             aria-label="Pick color"
-                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`} 
+                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
                             data-testid="color-picker-toggle"
-                            type="button" 
+                            type="button"
                             onClick={() => {
                                 setShowColorPicker(!showColorPicker);
                                 setShowChildren(false);
@@ -289,7 +270,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                                         mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                                         maskComposite: 'exclude'
                                     }} />
-                                    <span 
+                                    <span
                                         className="block size-full rounded-full border-2 border-white"
                                         style={{backgroundColor: value}}
                                     >
diff --git a/packages/koenig-lexical/src/hooks/useClickOutside.js b/packages/koenig-lexical/src/hooks/useClickOutside.js
new file mode 100644
index 0000000000..39d752c8c2
--- /dev/null
+++ b/packages/koenig-lexical/src/hooks/useClickOutside.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export function useClickOutside(enabled, ref, handler) {
+    React.useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handler();
+            }
+        };
+
+        window.addEventListener('mousedown', handleClickOutside, {capture: true});
+        return () => window.removeEventListener('mousedown', handleClickOutside, {capture: true});
+    }, [enabled, handler, ref]);
+}

From a898422bf5093e9f03da6b36dba51cd390289507 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 23:15:11 +0000
Subject: [PATCH 25/41] Fixed display of button accent color in demo

- the default color of the button is the accent color (with correct fallbacks) so there's no need to override it when accent is selected
---
 .../src/components/ui/cards/CallToActionCard.jsx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index e96aa720ab..8933d87a21 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -314,8 +314,8 @@ export function CallToActionCard({
                                     dataTestId="cta-button"
                                     placeholder="Add button text"
                                     size={layout === 'immersive' ? 'medium' : 'small'}
-                                    style={buttonColor ? {
-                                        backgroundColor: buttonColor === 'accent' ? 'var(--accent-color)' : buttonColor,
+                                    style={buttonColor !== 'accent' ? {
+                                        backgroundColor: buttonColor,
                                         color: buttonTextColor
                                     } : undefined}
                                     value={buttonText}

From 6f8074d46e2397b66a929933d453459ce5f60fab Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 25 Feb 2025 23:41:01 +0000
Subject: [PATCH 26/41] Fixed `return undefined` from React components in
 MediaPlaceholder

---
 .../koenig-lexical/src/components/ui/MediaPlaceholder.jsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
index 9d57dfb05a..d46af44f50 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
@@ -31,14 +31,14 @@ export const CardText = ({text, type}) => (
 
 const ButtonContents = ({desc, hasErrors}) => {
     if (hasErrors) {
-        return;
+        return null;
     }
     return <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>;
 };
 
 const StandardContents = ({desc, hasErrors, icon, size}) => {
     if (size === 'xsmall' && hasErrors) {
-        return;
+        return null;
     }
 
     const Icon = PLACEHOLDER_ICONS[icon];

From bcef9bed0fd153f3c1fc69ba7ef03e4452c18791 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 28 Feb 2025 10:55:57 +0000
Subject: [PATCH 27/41] Extracted modified UI components to beta copies

- removes changes from non-beta cards/components
- updated beta CTA card to use beta UI components
- allows other cards to be switched to new UI later behind a flag for safer releases
---
 .../src/components/ui/ButtonGroup.jsx         |   6 +-
 .../src/components/ui/ButtonGroupBeta.jsx     |  51 +++
 .../components/ui/ButtonGroupBeta.stories.jsx |  48 +++
 .../src/components/ui/ColorOptionButtons.jsx  |  83 ++---
 .../components/ui/ColorOptionButtonsBeta.jsx  |  93 ++++++
 .../src/components/ui/ColorPicker.jsx         | 154 +---------
 .../src/components/ui/ColorPickerBeta.jsx     | 290 ++++++++++++++++++
 .../components/ui/ColorPickerBeta.stories.jsx |  33 ++
 .../src/components/ui/MediaPlaceholder.jsx    | 122 ++------
 .../components/ui/MediaPlaceholderBeta.jsx    | 148 +++++++++
 .../ui/MediaPlaceholderBeta.stories.jsx       |  91 ++++++
 .../src/components/ui/MediaUploader.jsx       |   3 -
 .../src/components/ui/MediaUploaderBeta.jsx   | 139 +++++++++
 .../src/components/ui/SettingsPanel.jsx       | 110 ++++++-
 .../components/ui/cards/CallToActionCard.jsx  |  10 +-
 .../ui/cards/HeaderCard/v2/HeaderCard.jsx     |  89 +++---
 .../src/components/ui/cards/SignupCard.jsx    |  88 +++---
 .../src/components/ui/cards/VideoCard.jsx     |   3 +-
 .../test/e2e/cards/callout-card.test.js       |  38 +--
 .../test/e2e/cards/gallery-card.test.js       |   3 +-
 .../test/e2e/cards/header-card.test.js        |  78 ++---
 .../test/e2e/cards/signup-card.test.js        |  78 ++---
 22 files changed, 1234 insertions(+), 524 deletions(-)
 create mode 100644 packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/ColorOptionButtonsBeta.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/ColorPickerBeta.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/ColorPickerBeta.stories.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
 create mode 100644 packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
index 6074ef2a05..3a2aee8352 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroup.jsx
@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroup({buttons = [], selectedName, onClick}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
+            <ul className="flex items-center justify-evenly gap-[.6rem] rounded-lg font-sans text-md font-normal text-white">
                 {buttons.map(({label, name, Icon, dataTestId}) => (
                     <IconButton
                         key={`${name}-${label}`}
@@ -33,7 +33,7 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
         <li className="mb-0">
             <button
                 aria-label={label}
-                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-grey-150 dark:hover:bg-grey-900 ${isActive ? 'bg-grey-150 text-green-600 dark:bg-grey-900 dark:text-white' : 'text-black dark:text-white' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 type="button"
                 onClick={handleClick}
@@ -47,5 +47,5 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
 }
 
 ButtonGroup.propTypes = {
-    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive'])
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list'])
 };
diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
new file mode 100644
index 0000000000..dc15eed61a
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {Tooltip} from './Tooltip';
+import {usePreviousFocus} from '../../hooks/usePreviousFocus';
+
+export function ButtonGroupBeta({buttons = [], selectedName, onClick}) {
+    return (
+        <div className="flex">
+            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
+                {buttons.map(({label, name, Icon, dataTestId}) => (
+                    <IconButton
+                        key={`${name}-${label}`}
+                        dataTestId={dataTestId}
+                        Icon={Icon}
+                        label={label}
+                        name={name}
+                        selectedName={selectedName}
+                        onClick={onClick}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export function IconButton({dataTestId, onClick, label, name, selectedName, Icon}) {
+    const isActive = name === selectedName;
+
+    const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
+
+    return (
+        <li className="mb-0">
+            <button
+                aria-label={label}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
+                data-testid={dataTestId}
+                type="button"
+                onClick={handleClick}
+                onMouseDown={handleMousedown}
+            >
+                {Icon ? <Icon className="size-4 stroke-2" /> : label}
+                {(Icon && label) && <Tooltip label={label} />}
+            </button>
+        </li>
+    );
+}
+
+ButtonGroupBeta.propTypes = {
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive'])
+};
diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
new file mode 100644
index 0000000000..28209e6657
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
@@ -0,0 +1,48 @@
+import ImgFullIcon from '../../assets/icons/kg-img-full.svg?react';
+import ImgRegularIcon from '../../assets/icons/kg-img-regular.svg?react';
+import ImgWideIcon from '../../assets/icons/kg-img-wide.svg?react';
+import React from 'react';
+import {ButtonGroupBeta, IconButton} from './ButtonGroupBeta';
+
+const story = {
+    title: 'Generic/Button group (beta)',
+    component: ButtonGroupBeta,
+    subcomponents: {IconButton},
+    parameters: {
+        status: {
+            type: 'functional'
+        }
+    },
+    argTypes: {
+        selectedName: {control: 'select', options: ['regular', 'wide', 'full']}
+    }
+};
+export default story;
+
+const Template = (args) => {
+    return (
+        <ButtonGroupBeta {...args} />
+    );
+};
+
+export const CardWidth = Template.bind({});
+CardWidth.args = {
+    selectedName: 'regular',
+    buttons: [
+        {
+            label: 'Regular',
+            name: 'regular',
+            Icon: ImgRegularIcon
+        },
+        {
+            label: 'Wide',
+            name: 'wide',
+            Icon: ImgWideIcon
+        },
+        {
+            label: 'Full',
+            name: 'full',
+            Icon: ImgFullIcon
+        }
+    ]
+};
diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
index a87fc620e0..595eda9aa8 100644
--- a/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx
@@ -1,70 +1,31 @@
 import PlusIcon from '../../assets/icons/plus.svg?react';
-import React, {useState} from 'react';
+import React from 'react';
 import {Tooltip} from './Tooltip';
-import {useClickOutside} from '../../hooks/useClickOutside';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
-    const [isOpen, setIsOpen] = useState(false);
-    const componentRef = React.useRef(null);
-
-    const selectedButton = buttons.find(button => button.name === selectedName);
-
-    // Close the swatch popover when clicking outside of it
-    useClickOutside(isOpen, componentRef, () => setIsOpen(false));
-
     return (
-        <div ref={componentRef} className="relative">
-            <button
-                className={`relative size-6 cursor-pointer rounded-full ${selectedName ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
-                data-testid="color-options-button"
-                type="button"
-                onClick={() => setIsOpen(!isOpen)}
-            >
-                {selectedName && (
-                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
-                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
-                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                        WebkitMaskComposite: 'xor',
-                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                        maskComposite: 'exclude'
-                    }} />
-                )}
-                <span
-                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white`}
-                ></span>
-            </button>
+        <div className="flex">
+            <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
+                {buttons.map(({label, name, color}) => (
+                    name !== 'image' ?
+                        <ColorButton
+                            key={`${name}-${label}`}
+                            color={color}
+                            label={label}
+                            name={name}
+                            selectedName={selectedName}
+                            onClick={onClick}
+                        />
+                        :
+                        <li key='background-image' className={`flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
+                            <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
+                                <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
+                            </span>
+                        </li>
 
-            {/* Color options popover */}
-            {isOpen && (
-                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow" data-testid="color-options-popover">
-                    <div className="flex">
-                        <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
-                            {buttons.map(({label, name, color}) => (
-                                name !== 'image' ?
-                                    <ColorButton
-                                        key={`${name}-${label}`}
-                                        color={color}
-                                        data-testid={`color-options-${name}-button`}
-                                        label={label}
-                                        name={name}
-                                        selectedName={selectedName}
-                                        onClick={(title) => {
-                                            onClick(title);
-                                            setIsOpen(false);
-                                        }}
-                                    />
-                                    :
-                                    <li key='background-image' className={`mb-0 flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
-                                        <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
-                                            <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
-                                        </span>
-                                    </li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            )}
+                ))}
+            </ul>
         </div>
     );
 }
@@ -74,7 +35,7 @@ export function ColorButton({onClick, label, name, color, selectedName}) {
 
     const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
     return (
-        <li className="mb-0">
+        <li>
             <button
                 aria-label={label}
                 className={`group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}
diff --git a/packages/koenig-lexical/src/components/ui/ColorOptionButtonsBeta.jsx b/packages/koenig-lexical/src/components/ui/ColorOptionButtonsBeta.jsx
new file mode 100644
index 0000000000..d361a39796
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ColorOptionButtonsBeta.jsx
@@ -0,0 +1,93 @@
+import PlusIcon from '../../assets/icons/plus.svg?react';
+import React, {useState} from 'react';
+import {Tooltip} from './Tooltip';
+import {useClickOutside} from '../../hooks/useClickOutside';
+import {usePreviousFocus} from '../../hooks/usePreviousFocus';
+
+export function ColorOptionButtonsBeta({buttons = [], selectedName, onClick}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const componentRef = React.useRef(null);
+
+    const selectedButton = buttons.find(button => button.name === selectedName);
+
+    // Close the swatch popover when clicking outside of it
+    useClickOutside(isOpen, componentRef, () => setIsOpen(false));
+
+    return (
+        <div ref={componentRef} className="relative">
+            <button
+                className={`relative size-6 cursor-pointer rounded-full ${selectedName ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                data-testid="color-options-button"
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {selectedName && (
+                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        WebkitMaskComposite: 'xor',
+                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        maskComposite: 'exclude'
+                    }} />
+                )}
+                <span
+                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white`}
+                ></span>
+            </button>
+
+            {/* Color options popover */}
+            {isOpen && (
+                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow" data-testid="color-options-popover">
+                    <div className="flex">
+                        <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
+                            {buttons.map(({label, name, color}) => (
+                                name !== 'image' ?
+                                    <ColorButton
+                                        key={`${name}-${label}`}
+                                        color={color}
+                                        data-testid={`color-options-${name}-button`}
+                                        label={label}
+                                        name={name}
+                                        selectedName={selectedName}
+                                        onClick={(title) => {
+                                            onClick(title);
+                                            setIsOpen(false);
+                                        }}
+                                    />
+                                    :
+                                    <li key='background-image' className={`mb-0 flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
+                                        <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
+                                            <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
+                                        </span>
+                                    </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function ColorButton({onClick, label, name, color, selectedName}) {
+    const isActive = name === selectedName;
+
+    const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
+    return (
+        <li className="mb-0">
+            <button
+                aria-label={label}
+                className={`group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}
+                data-test-id={`color-picker-${name}`}
+                type="button"
+                onClick={handleClick}
+                onMouseDown={handleMousedown}
+            >
+                <span
+                    className={`${color} size-[1.8rem] rounded-full border`}
+                ></span>
+                <Tooltip label={label} />
+            </button>
+        </li>
+    );
+}
diff --git a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
index 3aa8f596c5..288889701d 100644
--- a/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
+++ b/packages/koenig-lexical/src/components/ui/ColorPicker.jsx
@@ -1,14 +1,12 @@
 import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
-import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
-import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
 import {HexColorInput, HexColorPicker} from 'react-colorful';
 import {Tooltip} from './Tooltip';
 import {getAccentColor} from '../../utils/getAccentColor';
-import {useClickOutside} from '../../hooks/useClickOutside';
 
-export function ColorPicker({value, eyedropper, hasTransparentOption, onChange, children}) {
+export function ColorPicker({value, eyedropper, hasTransparentOption, onChange}) {
     // HexColorInput doesn't support adding a ref on the input itself
     const inputWrapperRef = useRef(null);
 
@@ -78,7 +76,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange,
     }, []);
 
     return (
-        <div onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
+        <div className="mt-2" onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
             <HexColorPicker color={hexValue || '#ffffff'} onChange={onChange} onMouseDown={startUsingColorPicker} onTouchStart={startUsingColorPicker} />
             <div className="mt-3 flex gap-2">
                 <div ref={inputWrapperRef} className={`relative flex w-full items-center rounded-lg border border-grey-100 bg-grey-100 px-3 py-1.5 font-sans text-sm font-normal text-grey-900 transition-colors placeholder:text-grey-500 focus-within:border-green focus-within:bg-white focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] focus-within:outline-none dark:border-transparent dark:bg-grey-900 dark:text-white dark:selection:bg-grey-800 dark:placeholder:text-grey-700 dark:focus-within:border-green dark:hover:bg-grey-925 dark:focus:bg-grey-925`} onClick={focusHexInputOnClick}>
@@ -96,7 +94,6 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange,
                 </div>
 
                 {hasTransparentOption && <Button color='grey' value='Clear' onClick={() => onChange('transparent')} />}
-                {children}
             </div>
         </div>
     );
@@ -137,36 +134,12 @@ function ColorSwatch({hex, accent, transparent, title, isSelected, onSelect}) {
     );
 }
 
-export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker, onChange, isExpanded, eyedropper, hasTransparentOption, children}) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [showColorPicker, setShowColorPicker] = useState(false);
-    const [showChildren, setShowChildren] = useState(false);
-    const popoverRef = useRef(null);
-
-    useClickOutside(isOpen, popoverRef, () => setIsOpen(false));
-
-    const stopPropagation = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-    }, []);
-
-    useEffect(() => {
-        if (isExpanded) {
-            setIsOpen(true);
-            setShowChildren(true);
-            setShowColorPicker(false);
-        }
-    }, [isExpanded]);
-
+export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker, isExpanded}) {
     let backgroundColor = value;
     let selectedSwatch = swatches.find(swatch => swatch.hex === value)?.title;
-
     if (value === 'accent') {
         backgroundColor = getAccentColor();
         selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
-    } else if (value === 'image') {
-        backgroundColor = 'transparent';
-        selectedSwatch = swatches.find(swatch => swatch.image)?.title;
     } else if (value === 'transparent') {
         backgroundColor = 'white';
         selectedSwatch = swatches.find(swatch => swatch.transparent)?.title;
@@ -176,115 +149,22 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
         selectedSwatch = null;
     }
 
-    const handleColorPickerChange = (newValue) => {
-        onChange(newValue);
-        // Don't close the popover when using the color picker
-    };
-
     return (
-        <div className="relative" data-testid="color-selector-button">
-            <button
-                className={`relative size-6 cursor-pointer rounded-full ${value ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
-                type="button"
-                onClick={() => {
-                    setIsOpen(!isOpen);
-                    setShowColorPicker(false);
-                    setShowChildren(false);
-                }}
-            >
-                {value && (
-                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
-                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
-                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                        WebkitMaskComposite: 'xor',
-                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                        maskComposite: 'exclude'
-                    }} />
+        <div className='flex gap-1'>
+            <div className={`flex items-center gap-1`}>
+                {swatches.map(({customContent, ...swatch}) => (
+                    customContent ? <Fragment key={swatch.title}>{customContent}</Fragment> : <ColorSwatch key={swatch.title} isSelected={selectedSwatch === swatch.title} onSelect={onSwatchChange} {...swatch} />
+                ))}
+            </div>
+            <button aria-label="Pick color" className="group relative size-6 rounded-full border border-grey-200 dark:border-grey-800" type="button" onClick={onTogglePicker}>
+                <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
+                {value && !selectedSwatch && (
+                    <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
+                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                    </div>
                 )}
-                <span
-                    className="block size-full rounded-full border-2 border-white"
-                    style={{backgroundColor}}
-                >
-                    {
-                        value === 'image' && (
-                            <ImgBgIcon/>
-                        )
-                    }
-                    {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
-                </span>
+                <Tooltip label='Pick color' />
             </button>
-
-            {isOpen && (
-                <div
-                    ref={popoverRef}
-                    className={clsx(
-                        'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-950',
-                        (showColorPicker || showChildren) && 'min-w-[296px]'
-                    )}
-                    onClick={stopPropagation}
-                    onMouseDown={stopPropagation}
-                    onTouchStart={stopPropagation}
-                >
-                    {showColorPicker && (
-                        <ColorPicker
-                            eyedropper={eyedropper}
-                            hasTransparentOption={hasTransparentOption}
-                            value={value}
-                            onChange={handleColorPickerChange}
-                        />
-                    )}
-                    {showChildren && children}
-                    <div className="flex justify-end gap-1">
-                        <div className={`flex items-center gap-1`}>
-                            {swatches.map(({customContent, ...swatch}) => (
-                                customContent ?
-                                    <Fragment key={swatch.title}>{customContent}</Fragment> :
-                                    <ColorSwatch
-                                        key={swatch.title}
-                                        isSelected={selectedSwatch === swatch.title}
-                                        onSelect={(val) => {
-                                            onSwatchChange(val);
-                                            setShowColorPicker(false);
-                                        }}
-                                        {...swatch}
-                                    />
-                            ))}
-                        </div>
-                        <button
-                            aria-label="Pick color"
-                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
-                            data-testid="color-picker-toggle"
-                            type="button"
-                            onClick={() => {
-                                setShowColorPicker(!showColorPicker);
-                                setShowChildren(false);
-                                onTogglePicker();
-                            }}
-                        >
-                            {!selectedSwatch ? (
-                                <>
-                                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
-                                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
-                                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                                        WebkitMaskComposite: 'xor',
-                                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-                                        maskComposite: 'exclude'
-                                    }} />
-                                    <span
-                                        className="block size-full rounded-full border-2 border-white"
-                                        style={{backgroundColor: value}}
-                                    >
-                                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
-                                    </span>
-                                </>
-                            ) : (
-                                <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
-                            )}
-                            <Tooltip label='Pick color' />
-                        </button>
-                    </div>
-                </div>
-            )}
         </div>
     );
 }
diff --git a/packages/koenig-lexical/src/components/ui/ColorPickerBeta.jsx b/packages/koenig-lexical/src/components/ui/ColorPickerBeta.jsx
new file mode 100644
index 0000000000..73d5d62095
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ColorPickerBeta.jsx
@@ -0,0 +1,290 @@
+import EyedropperIcon from '../../assets/icons/kg-eyedropper.svg?react';
+import ImgBgIcon from '../../assets/icons/kg-img-bg.svg?react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import clsx from 'clsx';
+import {Button} from './Button';
+import {HexColorInput, HexColorPicker} from 'react-colorful';
+import {Tooltip} from './Tooltip';
+import {getAccentColor} from '../../utils/getAccentColor';
+import {useClickOutside} from '../../hooks/useClickOutside';
+
+export function ColorPickerBeta({value, eyedropper, hasTransparentOption, onChange, children}) {
+    // HexColorInput doesn't support adding a ref on the input itself
+    const inputWrapperRef = useRef(null);
+
+    const stopPropagation = useCallback((e) => {
+        e.stopPropagation();
+
+        const inputElement = inputWrapperRef.current?.querySelector('input');
+        const isInputField = e.target === inputElement;
+
+        // Allow text selection for events on the input field
+        if (isInputField) {
+            return;
+        }
+
+        // Prevent closing the color picker when clicking somewhere inside it
+        inputWrapperRef.current?.querySelector('input')?.focus();
+
+        e.preventDefault();
+    }, []);
+
+    const isUsingColorPicker = useRef(false);
+
+    const stopUsingColorPicker = useCallback(() => {
+        isUsingColorPicker.current = false;
+        inputWrapperRef.current?.querySelector('input')?.focus();
+
+        document.removeEventListener('mouseup', stopUsingColorPicker);
+        document.removeEventListener('touchend', stopUsingColorPicker);
+    }, []);
+
+    const startUsingColorPicker = useCallback(() => {
+        isUsingColorPicker.current = true;
+
+        document.addEventListener('mouseup', stopUsingColorPicker);
+        document.addEventListener('touchend', stopUsingColorPicker);
+    }, [stopUsingColorPicker]);
+
+    const openColorPicker = useCallback((e) => {
+        e.preventDefault();
+
+        isUsingColorPicker.current = true;
+        document.body.style.setProperty('pointer-events', 'none');
+
+        const eyeDropper = new window.EyeDropper();
+        eyeDropper.open()
+            .then(result => onChange(result.sRGBHex))
+            .finally(() => {
+                isUsingColorPicker.current = false;
+                document.body.style.removeProperty('pointer-events');
+                inputWrapperRef.current?.querySelector('input')?.focus();
+            });
+    }, [onChange]);
+
+    useEffect(() => {
+        inputWrapperRef.current?.querySelector('input')?.focus();
+    }, []);
+
+    let hexValue = value;
+    if (value === 'accent') {
+        hexValue = getAccentColor();
+    } else if (value === 'transparent') {
+        hexValue = '';
+    }
+
+    const focusHexInputOnClick = useCallback((e) => {
+        inputWrapperRef.current?.querySelector('input')?.focus();
+    }, []);
+
+    return (
+        <div onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
+            <HexColorPicker color={hexValue || '#ffffff'} onChange={onChange} onMouseDown={startUsingColorPicker} onTouchStart={startUsingColorPicker} />
+            <div className="mt-3 flex gap-2">
+                <div ref={inputWrapperRef} className={`relative flex w-full items-center rounded-lg border border-grey-100 bg-grey-100 px-3 py-1.5 font-sans text-sm font-normal text-grey-900 transition-colors placeholder:text-grey-500 focus-within:border-green focus-within:bg-white focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] focus-within:outline-none dark:border-transparent dark:bg-grey-900 dark:text-white dark:selection:bg-grey-800 dark:placeholder:text-grey-700 dark:focus-within:border-green dark:hover:bg-grey-925 dark:focus:bg-grey-925`} onClick={focusHexInputOnClick}>
+                    <span className='ml-1 mr-2 text-grey-700'>#</span>
+                    <HexColorInput aria-label="Color value" className='z-50 w-full bg-transparent' color={hexValue} onChange={onChange} />
+                    {eyedropper && !!window.EyeDropper && (
+                        <button
+                            className="absolute inset-y-0 right-3 z-50 my-auto size-4 p-[1px]"
+                            type="button"
+                            onClick={openColorPicker}
+                        >
+                            <EyedropperIcon className="size-full stroke-2" />
+                        </button>
+                    )}
+                </div>
+
+                {hasTransparentOption && <Button color='grey' value='Clear' onClick={() => onChange('transparent')} />}
+                {children}
+            </div>
+        </div>
+    );
+}
+
+function ColorSwatch({hex, accent, transparent, title, isSelected, onSelect}) {
+    const backgroundColor = accent ? getAccentColor() : hex;
+
+    const ref = useRef(null);
+
+    const onSelectHandler = (e) => {
+        e.preventDefault();
+
+        if (accent) {
+            onSelect('accent');
+        } else if (transparent) {
+            onSelect('transparent');
+        } else {
+            onSelect(hex);
+        }
+    };
+
+    return (
+        <button
+            ref={ref}
+            className={clsx(
+                `group relative flex size-5 shrink-0 items-center rounded-full border border-grey-250 dark:border-grey-800`,
+                isSelected && 'outline outline-2 outline-green'
+            )}
+            style={{backgroundColor}}
+            title={title}
+            type="button"
+            onClick={onSelectHandler}
+        >
+            {transparent && <div className="absolute left-0 top-0 z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+            <Tooltip label={title} />
+        </button>
+    );
+}
+
+export function ColorIndicatorBeta({value, swatches, onSwatchChange, onTogglePicker, onChange, isExpanded, eyedropper, hasTransparentOption, children}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showColorPicker, setShowColorPicker] = useState(false);
+    const [showChildren, setShowChildren] = useState(false);
+    const popoverRef = useRef(null);
+
+    useClickOutside(isOpen, popoverRef, () => setIsOpen(false));
+
+    const stopPropagation = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    }, []);
+
+    useEffect(() => {
+        if (isExpanded) {
+            setIsOpen(true);
+            setShowChildren(true);
+            setShowColorPicker(false);
+        }
+    }, [isExpanded]);
+
+    let backgroundColor = value;
+    let selectedSwatch = swatches.find(swatch => swatch.hex === value)?.title;
+
+    if (value === 'accent') {
+        backgroundColor = getAccentColor();
+        selectedSwatch = swatches.find(swatch => swatch.accent)?.title;
+    } else if (value === 'image') {
+        backgroundColor = 'transparent';
+        selectedSwatch = swatches.find(swatch => swatch.image)?.title;
+    } else if (value === 'transparent') {
+        backgroundColor = 'white';
+        selectedSwatch = swatches.find(swatch => swatch.transparent)?.title;
+    }
+
+    if (isExpanded) {
+        selectedSwatch = null;
+    }
+
+    const handleColorPickerChange = (newValue) => {
+        onChange(newValue);
+        // Don't close the popover when using the color picker
+    };
+
+    return (
+        <div className="relative" data-testid="color-selector-button">
+            <button
+                className={`relative size-6 cursor-pointer rounded-full ${value ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                type="button"
+                onClick={() => {
+                    setIsOpen(!isOpen);
+                    setShowColorPicker(false);
+                    setShowChildren(false);
+                }}
+            >
+                {value && (
+                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        WebkitMaskComposite: 'xor',
+                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        maskComposite: 'exclude'
+                    }} />
+                )}
+                <span
+                    className="block size-full rounded-full border-2 border-white"
+                    style={{backgroundColor}}
+                >
+                    {
+                        value === 'image' && (
+                            <ImgBgIcon/>
+                        )
+                    }
+                    {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                </span>
+            </button>
+
+            {isOpen && (
+                <div
+                    ref={popoverRef}
+                    className={clsx(
+                        'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-950',
+                        (showColorPicker || showChildren) && 'min-w-[296px]'
+                    )}
+                    onClick={stopPropagation}
+                    onMouseDown={stopPropagation}
+                    onTouchStart={stopPropagation}
+                >
+                    {showColorPicker && (
+                        <ColorPickerBeta
+                            eyedropper={eyedropper}
+                            hasTransparentOption={hasTransparentOption}
+                            value={value}
+                            onChange={handleColorPickerChange}
+                        />
+                    )}
+                    {showChildren && children}
+                    <div className="flex justify-end gap-1">
+                        <div className={`flex items-center gap-1`}>
+                            {swatches.map(({customContent, ...swatch}) => (
+                                customContent ?
+                                    <Fragment key={swatch.title}>{customContent}</Fragment> :
+                                    <ColorSwatch
+                                        key={swatch.title}
+                                        isSelected={selectedSwatch === swatch.title}
+                                        onSelect={(val) => {
+                                            onSwatchChange(val);
+                                            setShowColorPicker(false);
+                                        }}
+                                        {...swatch}
+                                    />
+                            ))}
+                        </div>
+                        <button
+                            aria-label="Pick color"
+                            className={`group relative size-6 rounded-full ${!selectedSwatch ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                            data-testid="color-picker-toggle"
+                            type="button"
+                            onClick={() => {
+                                setShowColorPicker(!showColorPicker);
+                                setShowChildren(false);
+                                onTogglePicker();
+                            }}
+                        >
+                            {!selectedSwatch ? (
+                                <>
+                                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                        WebkitMaskComposite: 'xor',
+                                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                                        maskComposite: 'exclude'
+                                    }} />
+                                    <span
+                                        className="block size-full rounded-full border-2 border-white"
+                                        style={{backgroundColor: value}}
+                                    >
+                                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                                    </span>
+                                </>
+                            ) : (
+                                <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
+                            )}
+                            <Tooltip label='Pick color' />
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/packages/koenig-lexical/src/components/ui/ColorPickerBeta.stories.jsx b/packages/koenig-lexical/src/components/ui/ColorPickerBeta.stories.jsx
new file mode 100644
index 0000000000..9ef599ecc2
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/ColorPickerBeta.stories.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {ColorPickerBeta} from './ColorPickerBeta';
+
+const story = {
+    title: 'Generic/Color picker (beta)',
+    component: ColorPickerBeta,
+    parameters: {
+        status: {
+            type: 'uiReady'
+        }
+    },
+    argTypes: {
+        selectedName: {control: 'select', options: ['grey', 'blue', 'green', 'yellow', 'red', 'pink', 'purple']}
+    }
+};
+export default story;
+
+const Template = (args) => {
+    return (
+        <div className="w-[240px]">
+            <ColorPickerBeta {...args} />
+        </div>
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    swatches: [
+        {title: 'Brand color', accent: true},
+        {title: 'Black', hex: '#000000'},
+        {title: 'Transparent', transparent: true}
+    ]
+};
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
index d46af44f50..a7452220ca 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx
@@ -6,7 +6,6 @@ import ProductPlaceholderIcon from '../../assets/icons/kg-product-placeholder.sv
 import PropTypes from 'prop-types';
 import React from 'react';
 import VideoPlaceholderIcon from '../../assets/icons/kg-video-placeholder.svg?react';
-import clsx from 'clsx';
 
 export const PLACEHOLDER_ICONS = {
     image: ImgPlaceholderIcon,
@@ -17,51 +16,10 @@ export const PLACEHOLDER_ICONS = {
     product: ProductPlaceholderIcon
 };
 
-export const CardText = ({text, type}) => (
-    <span
-        className={clsx(
-            'text-center font-sans text-sm font-semibold text-grey-800 transition-all group-hover:text-grey-800',
-            type === 'button' && 'px-3 py-1'
-        )}
-        data-kg-card-drag-text
-    >
-        {text}
-    </span>
-);
-
-const ButtonContents = ({desc, hasErrors}) => {
-    if (hasErrors) {
-        return null;
-    }
-    return <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>;
-};
-
-const StandardContents = ({desc, hasErrors, icon, size}) => {
-    if (size === 'xsmall' && hasErrors) {
-        return null;
-    }
-
-    const Icon = PLACEHOLDER_ICONS[icon];
-
-    const iconClasses = clsx(
-        'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100',
-        size === 'large' && 'size-20 text-grey',
-        size === 'small' && 'size-14 text-grey',
-        size === 'xsmall' && 'size-5 text-grey-700',
-        !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey',
-        (size === 'xsmall' && desc) && 'mr-3'
-    );
-
-    const descriptionClasses = clsx(
-        'flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100',
-        size === 'xsmall' && '!mt-0',
-        size !== 'xsmall' && '!mt-4'
+export const CardText = ({text}) => {
+    return (
+        <span className="font-sans text-sm font-bold text-grey-800 transition-all group-hover:text-grey-800" data-kg-card-drag-text>{text}</span>
     );
-
-    return <>
-        <Icon className={iconClasses} />
-        <p className={descriptionClasses}>{desc}</p>
-    </>;
 };
 
 export function MediaPlaceholder({
@@ -69,7 +27,6 @@ export function MediaPlaceholder({
     icon,
     filePicker,
     size,
-    type,
     borderStyle = 'squared',
     isDraggedOver,
     errors = [],
@@ -79,61 +36,35 @@ export function MediaPlaceholder({
     multiple = false,
     ...props
 }) {
-    const containerClasses = clsx(
-        'relative flex h-full items-center justify-center',
-        type === 'button' ? 'rounded-lg bg-grey-100' : 'border bg-grey-50',
-        size === 'xsmall' && type !== 'button' && 'before:pb-[12.5%] dark:bg-grey-900',
-        size !== 'xsmall' && type !== 'button' && 'before:pb-[62.5%] dark:bg-grey-950',
-        borderStyle === 'rounded' && type !== 'button' && 'rounded-lg border-grey/20 dark:border-transparent',
-        borderStyle !== 'rounded' && type !== 'button' && 'border-grey/20 dark:border-grey/10'
-    );
-
-    const buttonClasses = clsx(
-        'group flex cursor-pointer select-none items-center justify-center',
-        type === 'button' && 'px-3 py-1',
-        type !== 'button' && (size === 'xsmall' ? 'p-4' : 'flex-col p-20')
-    );
-
-    const errorClasses = clsx(
-        'font-sans text-sm font-semibold text-red',
-        size !== 'xsmall' && 'mt-3 max-w-[65%]'
-    );
-
-    const errorMessages = errors.map(error => (
-        <span
-            key={error.message}
-            className={errorClasses}
-            data-testid={errorDataTestId}
-        >
-            {error.message}
-        </span>
-    ));
+    const Icon = PLACEHOLDER_ICONS[icon];
 
     return (
         <div
             ref={placeholderRef}
-            className="not-kg-prose size-full"
-            {...props}
+            className="not-kg-prose size-full" {...props}
             data-testid={dataTestId}
         >
-            <div className={containerClasses}>
-                {isDraggedOver ? (
-                    <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} type={type} />
-                ) : (
-                    <button
-                        className={buttonClasses}
-                        name="placeholder-button"
-                        type="button"
-                        onClick={filePicker}
-                    >
-                        {type === 'button'
-                            ? <ButtonContents desc={desc} hasErrors={errors.length > 0} />
-                            : <StandardContents desc={desc} hasErrors={errors.length > 0} icon={icon} size={size} />
-                        }
-
-                        {errorMessages}
-                    </button>
-                )}
+            <div className={`relative flex h-full items-center justify-center border bg-grey-50 ${size === 'xsmall' ? 'before:pb-[12.5%] dark:bg-grey-900' : 'before:pb-[62.5%] dark:bg-grey-950'} ${borderStyle === 'rounded' ? 'rounded-lg border-grey/20 dark:border-transparent' : 'border-grey/20 dark:border-grey/10'}`}>
+                {isDraggedOver ?
+                    <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} /> :
+                    <>
+                        <button className={`group flex cursor-pointer select-none items-center justify-center ${size === 'xsmall' ? 'p-4' : 'flex-col p-20'}`} name="placeholder-button" type="button" onClick={filePicker}>
+                            {(size === 'xsmall' && errors.length > 0) ||
+                                <>
+                                    <Icon className={`shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100 ${size === 'large' ? 'size-20 text-grey' : size === 'small' ? 'size-14 text-grey' : size === 'xsmall' ? 'size-5 text-grey-700' : 'size-16 text-grey'} ${(size === 'xsmall') && desc ? 'mr-3' : ''}`} />
+                                    <p className={`flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100 ${size === 'xsmall' ? '!mt-0' : '!mt-4'}`}>{desc}</p>
+                                </>
+                            }
+                            {errors.map(error => (
+                                <span
+                                    key={error.message}
+                                    className={`font-sans text-sm font-semibold text-red ${size === 'xsmall' || 'mt-3 max-w-[65%]'}`}
+                                    data-testid={errorDataTestId}
+                                >{error.message}</span>
+                            ))}
+                        </button>
+                    </>
+                }
             </div>
         </div>
     );
@@ -143,6 +74,5 @@ MediaPlaceholder.propTypes = {
     icon: PropTypes.oneOf(['image', 'gallery', 'video', 'audio', 'file', 'product']),
     desc: PropTypes.string,
     size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-    type: PropTypes.oneOf(['image', 'button']),
     borderStyle: PropTypes.oneOf(['squared', 'rounded'])
 };
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.jsx
new file mode 100644
index 0000000000..62bf4332c5
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.jsx
@@ -0,0 +1,148 @@
+import AudioPlaceholderIcon from '../../assets/icons/kg-audio-placeholder.svg?react';
+import FilePlaceholderIcon from '../../assets/icons/kg-file-placeholder.svg?react';
+import GalleryPlaceholderIcon from '../../assets/icons/kg-gallery-placeholder.svg?react';
+import ImgPlaceholderIcon from '../../assets/icons/kg-img-placeholder.svg?react';
+import ProductPlaceholderIcon from '../../assets/icons/kg-product-placeholder.svg?react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import VideoPlaceholderIcon from '../../assets/icons/kg-video-placeholder.svg?react';
+import clsx from 'clsx';
+
+export const PLACEHOLDER_ICONS = {
+    image: ImgPlaceholderIcon,
+    gallery: GalleryPlaceholderIcon,
+    video: VideoPlaceholderIcon,
+    audio: AudioPlaceholderIcon,
+    file: FilePlaceholderIcon,
+    product: ProductPlaceholderIcon
+};
+
+export const CardText = ({text, type}) => (
+    <span
+        className={clsx(
+            'text-center font-sans text-sm font-semibold text-grey-800 transition-all group-hover:text-grey-800',
+            type === 'button' && 'px-3 py-1'
+        )}
+        data-kg-card-drag-text
+    >
+        {text}
+    </span>
+);
+
+const ButtonContents = ({desc, hasErrors}) => {
+    if (hasErrors) {
+        return null;
+    }
+    return <p className="!font-sans !text-[1.3rem] !font-medium text-grey-900">{desc}</p>;
+};
+
+const StandardContents = ({desc, hasErrors, icon, size}) => {
+    if (size === 'xsmall' && hasErrors) {
+        return null;
+    }
+
+    const Icon = PLACEHOLDER_ICONS[icon];
+
+    const iconClasses = clsx(
+        'shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100',
+        size === 'large' && 'size-20 text-grey',
+        size === 'small' && 'size-14 text-grey',
+        size === 'xsmall' && 'size-5 text-grey-700',
+        !['large', 'small', 'xsmall'].includes(size) && 'size-16 text-grey',
+        (size === 'xsmall' && desc) && 'mr-3'
+    );
+
+    const descriptionClasses = clsx(
+        'flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100',
+        size === 'xsmall' && '!mt-0',
+        size !== 'xsmall' && '!mt-4'
+    );
+
+    return <>
+        <Icon className={iconClasses} />
+        <p className={descriptionClasses}>{desc}</p>
+    </>;
+};
+
+export function MediaPlaceholderBeta({
+    desc,
+    icon,
+    filePicker,
+    size,
+    type,
+    borderStyle = 'squared',
+    isDraggedOver,
+    errors = [],
+    placeholderRef,
+    dataTestId = 'media-placeholder',
+    errorDataTestId = 'media-placeholder-errors',
+    multiple = false,
+    ...props
+}) {
+    const containerClasses = clsx(
+        'relative flex h-full items-center justify-center',
+        type === 'button' ? 'rounded-lg bg-grey-100' : 'border bg-grey-50',
+        size === 'xsmall' && type !== 'button' && 'before:pb-[12.5%] dark:bg-grey-900',
+        size !== 'xsmall' && type !== 'button' && 'before:pb-[62.5%] dark:bg-grey-950',
+        borderStyle === 'rounded' && type !== 'button' && 'rounded-lg border-grey/20 dark:border-transparent',
+        borderStyle !== 'rounded' && type !== 'button' && 'border-grey/20 dark:border-grey/10'
+    );
+
+    const buttonClasses = clsx(
+        'group flex cursor-pointer select-none items-center justify-center',
+        type === 'button' && 'px-3 py-1',
+        type !== 'button' && (size === 'xsmall' ? 'p-4' : 'flex-col p-20')
+    );
+
+    const errorClasses = clsx(
+        'font-sans text-sm font-semibold text-red',
+        size !== 'xsmall' && 'mt-3 max-w-[65%]'
+    );
+
+    const errorMessages = errors.map(error => (
+        <span
+            key={error.message}
+            className={errorClasses}
+            data-testid={errorDataTestId}
+        >
+            {error.message}
+        </span>
+    ));
+
+    return (
+        <div
+            ref={placeholderRef}
+            className="not-kg-prose size-full"
+            {...props}
+            data-testid={dataTestId}
+        >
+            <div className={containerClasses}>
+                {isDraggedOver ? (
+                    <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} type={type} />
+                ) : (
+                    <button
+                        className={buttonClasses}
+                        name="placeholder-button"
+                        type="button"
+                        onClick={filePicker}
+                    >
+                        {type === 'button'
+                            ? <ButtonContents desc={desc} hasErrors={errors.length > 0} />
+                            : <StandardContents desc={desc} hasErrors={errors.length > 0} icon={icon} size={size} />
+                        }
+
+                        {errorMessages}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+MediaPlaceholderBeta.propTypes = {
+    icon: PropTypes.oneOf(['image', 'gallery', 'video', 'audio', 'file', 'product']),
+    desc: PropTypes.string,
+    size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
+    type: PropTypes.oneOf(['image', 'button']),
+    borderStyle: PropTypes.oneOf(['squared', 'rounded'])
+};
diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
new file mode 100644
index 0000000000..c0c073e0c8
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+
+import {MediaPlaceholderBeta} from './MediaPlaceholderBeta';
+
+const story = {
+    title: 'Generic/Media placeholder (beta)',
+    component: MediaPlaceholderBeta,
+    argTypes: {
+        icon: {
+            options: ['image', 'gallery', 'video', 'audio', 'file', 'product'],
+            control: {type: 'select'}
+        },
+        size: {
+            options: ['xsmall', 'small', 'medium', 'large'],
+            control: {type: 'select'}
+        },
+        borderStyle: {
+            options: ['squared', 'rounded'],
+            control: {type: 'radio'}
+        }
+    },
+    parameters: {
+        status: {
+            type: 'functional'
+        }
+    }
+};
+export default story;
+
+const Template = args => (
+    <div className="flex">
+        <MediaPlaceholderBeta {...args} />
+    </div>
+);
+
+export const Image = Template.bind({});
+Image.args = {
+    icon: 'image',
+    desc: 'Click to select an image',
+    size: 'medium',
+    borderStyle: 'squared'
+};
+
+export const Gallery = Template.bind({});
+Gallery.args = {
+    icon: 'gallery',
+    desc: 'Click to select up to 9 images',
+    size: 'large',
+    borderStyle: 'squared'
+};
+
+export const Video = Template.bind({});
+Video.args = {
+    icon: 'video',
+    desc: 'Click to select a video',
+    size: 'medium',
+    borderStyle: 'squared'
+};
+
+export const Audio = Template.bind({});
+Audio.args = {
+    icon: 'audio',
+    desc: 'Click to upload an audio file',
+    size: 'xsmall',
+    borderStyle: 'squared'
+};
+
+export const File = Template.bind({});
+File.args = {
+    icon: 'file',
+    desc: 'Click to upload a file',
+    size: 'xsmall',
+    borderStyle: 'squared'
+};
+
+export const Product = Template.bind({});
+Product.args = {
+    icon: 'product',
+    desc: 'Click to upload a product image',
+    size: 'small',
+    borderStyle: 'squared'
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    icon: 'video',
+    desc: 'Click to select a video',
+    size: 'medium',
+    borderStyle: 'squared',
+    errors: [{message: 'The file type you uploaded is not supported. Please use .MP4, .WEBM, .OGV'}]
+};
diff --git a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
index 1c1cfc606d..ca108223c8 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploader.jsx
@@ -17,7 +17,6 @@ export function MediaUploader({
     desc,
     icon,
     size,
-    type,
     borderStyle = 'squared',
     backgroundSize = 'cover',
     mimeTypes,
@@ -65,7 +64,6 @@ export function MediaUploader({
                     isDraggedOver={dragHandler?.isDraggedOver}
                     placeholderRef={dragHandler?.setRef}
                     size={size}
-                    type={type}
                 />
                 <ImageUploadForm
                     fileInputRef={onFileInputRef}
@@ -122,7 +120,6 @@ MediaUploader.propTypes = {
     desc: PropTypes.string,
     icon: PropTypes.string,
     size: PropTypes.string,
-    type: PropTypes.oneOf(['image', 'button']),
     borderStyle: PropTypes.string,
     mimeTypes: PropTypes.arrayOf(PropTypes.string),
     onFileChange: PropTypes.func,
diff --git a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
new file mode 100644
index 0000000000..57b5fae7d8
--- /dev/null
+++ b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
@@ -0,0 +1,139 @@
+import DeleteIcon from '../../assets/icons/kg-trash.svg?react';
+import ImageUploadForm from './ImageUploadForm';
+import PropTypes from 'prop-types';
+import WandIcon from '../../assets/icons/kg-wand.svg?react';
+import clsx from 'clsx';
+import {IconButton} from './IconButton';
+import {MediaPlaceholderBeta} from './MediaPlaceholderBeta';
+import {ProgressBar} from './ProgressBar';
+import {openFileSelection} from '../../utils/openFileSelection';
+import {useRef} from 'react';
+
+export function MediaUploaderBeta({
+    className,
+    imgClassName,
+    src,
+    alt,
+    desc,
+    icon,
+    size,
+    type,
+    borderStyle = 'squared',
+    backgroundSize = 'cover',
+    mimeTypes,
+    onFileChange,
+    dragHandler,
+    isEditing = true,
+    isLoading,
+    isPinturaEnabled,
+    openImageEditor,
+    progress,
+    errors,
+    onRemoveMedia,
+    additionalActions,
+    setFileInputRef
+}) {
+    const fileInputRef = useRef(null);
+
+    const onFileInputRef = (element) => {
+        fileInputRef.current = element;
+        setFileInputRef?.(element);
+    };
+
+    const progressStyle = {
+        width: `${progress?.toFixed(0)}%`
+    };
+
+    const onRemove = (e) => {
+        e.stopPropagation(); // prevents card from losing selected state
+        onRemoveMedia();
+    };
+
+    const isEmpty = !isLoading && !src;
+
+    if (isEmpty) {
+        return (
+            <div className={className}>
+                <MediaPlaceholderBeta
+                    borderStyle={borderStyle}
+                    dataTestId="media-upload-placeholder"
+                    desc={isEditing ? desc : ''}
+                    errorDataTestId="media-upload-errors"
+                    errors={errors}
+                    filePicker={() => openFileSelection({fileInputRef})}
+                    icon={icon}
+                    isDraggedOver={dragHandler?.isDraggedOver}
+                    placeholderRef={dragHandler?.setRef}
+                    size={size}
+                    type={type}
+                />
+                <ImageUploadForm
+                    fileInputRef={onFileInputRef}
+                    filePicker={() => openFileSelection({fileInputRef})}
+                    mimeTypes={mimeTypes}
+                    onFileChange={onFileChange}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className={clsx('group/image relative flex items-center justify-center', borderStyle === 'dashed' && 'rounded', className)} data-testid="media-upload-filled">
+            {src && (
+                <>
+                    <img alt={alt} className={clsx('mx-auto size-full rounded-lg', backgroundSize === 'cover' ? 'object-cover' : 'object-contain', imgClassName)} src={src} />
+                    <div className={clsx('absolute inset-0 rounded-lg bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover/image:opacity-100', borderStyle === 'dashed' && 'rounded-lg')}></div>
+                </>
+            )}
+
+            {!isLoading && (
+                <div className="absolute right-1 top-1 flex space-x-1 opacity-0 transition-all group-hover/image:opacity-100">
+                    {additionalActions}
+                    { isPinturaEnabled && <IconButton Icon={WandIcon} label="Edit" onClick={() => openImageEditor({
+                        image: src,
+                        handleSave: (editedImage) => {
+                            onFileChange({
+                                target: {
+                                    files: [editedImage]
+                                }
+                            });
+                        }
+                    })} /> }
+                    <IconButton dataTestId="media-upload-remove" Icon={DeleteIcon} label="Delete" onClick={onRemove} />
+                </div>
+            )}
+
+            {isLoading && (
+                <div
+                    className={clsx('absolute inset-0 flex min-w-full items-center justify-center overflow-hidden border border-grey-100 bg-grey-75', borderStyle === 'rounded' && 'rounded-lg')}
+                    data-testid="custom-thumbnail-progress"
+                >
+                    <ProgressBar style={progressStyle} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+MediaUploaderBeta.propTypes = {
+    className: PropTypes.string,
+    src: PropTypes.string,
+    alt: PropTypes.string,
+    desc: PropTypes.string,
+    icon: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.oneOf(['image', 'button']),
+    borderStyle: PropTypes.string,
+    mimeTypes: PropTypes.arrayOf(PropTypes.string),
+    onFileChange: PropTypes.func,
+    dragHandler: PropTypes.shape({
+        isDraggedOver: PropTypes.bool,
+        setRef: PropTypes.func
+    }),
+    isLoading: PropTypes.bool,
+    progress: PropTypes.number,
+    errors: PropTypes.arrayOf(PropTypes.shape({
+        message: PropTypes.string
+    })),
+    onRemoveMedia: PropTypes.func
+};
diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
index dca5109966..bda5cc9d06 100644
--- a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
+++ b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
@@ -3,12 +3,16 @@ import React from 'react';
 import clsx from 'clsx';
 import useSettingsPanelReposition from '../../hooks/useSettingsPanelReposition';
 import {ButtonGroup} from './ButtonGroup';
-import {ColorIndicator} from './ColorPicker';
+import {ButtonGroupBeta} from './ButtonGroupBeta';
+import {ColorIndicator, ColorPicker} from './ColorPicker';
+import {ColorIndicatorBeta} from './ColorPickerBeta';
 import {ColorOptionButtons} from './ColorOptionButtons';
+import {ColorOptionButtonsBeta} from './ColorOptionButtonsBeta.jsx';
 import {Dropdown} from './Dropdown';
 import {Input} from './Input';
 import {InputList, InputListItem} from './InputList.jsx';
 import {MediaUploader} from './MediaUploader';
+import {MediaUploaderBeta} from './MediaUploaderBeta';
 import {MultiSelectDropdown} from './MultiSelectDropdown';
 import {Slider} from './Slider.jsx';
 import {TabView} from './TabView';
@@ -231,6 +235,18 @@ export function ButtonGroupSetting({label, onClick, selectedName, buttons}) {
     );
 }
 
+export function ButtonGroupSettingBeta({label, onClick, selectedName, buttons}) {
+    return (
+        <div className="flex w-full items-center justify-between text-[1.3rem]">
+            <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">{label}</div>
+
+            <div className="shrink-0 pl-2">
+                <ButtonGroupBeta buttons={buttons} selectedName={selectedName} onClick={onClick} />
+            </div>
+        </div>
+    );
+}
+
 export function ColorOptionSetting({label, onClick, selectedName, buttons, layout, dataTestId}) {
     return (
         <div className={`flex w-full text-[1.3rem] ${layout === 'stacked' ? 'flex-col' : 'items-center justify-between'}`} data-testid={dataTestId}>
@@ -243,11 +259,41 @@ export function ColorOptionSetting({label, onClick, selectedName, buttons, layou
     );
 }
 
-export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerChange, onTogglePicker, value, swatches, eyedropper, hasTransparentOption, dataTestId, customToolbarContent, children}) {
+export function ColorOptionSettingBeta({label, onClick, selectedName, buttons, layout, dataTestId}) {
+    return (
+        <div className={`flex w-full text-[1.3rem] ${layout === 'stacked' ? 'flex-col' : 'items-center justify-between'}`} data-testid={dataTestId}>
+            <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">{label}</div>
+
+            <div className={`shrink-0 ${layout === 'stacked' ? '-mx-1 pt-[.6rem]' : 'pl-2'}`}>
+                <ColorOptionButtonsBeta buttons={buttons} selectedName={selectedName} onClick={onClick} />
+            </div>
+        </div>
+    );
+}
+
+export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerChange, onTogglePicker, value, swatches, eyedropper, hasTransparentOption, dataTestId}) {
+    const mappedPicker = (event) => {
+        onTogglePicker(true);
+    };
+
     const markClickedInside = (event) => {
         event.stopPropagation();
     };
 
+    // Close on click outside
+    React.useEffect(() => {
+        if (isExpanded) {
+            const closePicker = (event) => {
+                onTogglePicker(false);
+            };
+            document.addEventListener('click', closePicker);
+
+            return () => {
+                document.removeEventListener('click', closePicker);
+            };
+        }
+    }, [isExpanded, onTogglePicker]);
+
     return (
         <div className="flex-col" data-testid={dataTestId} onClick={markClickedInside}>
             <div className="flex w-full items-center justify-between text-[1.3rem]">
@@ -255,6 +301,31 @@ export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerC
 
                 <div className="shrink-0 pl-2">
                     <ColorIndicator
+                        isExpanded={isExpanded}
+                        swatches={swatches}
+                        value={value}
+                        onSwatchChange={onSwatchChange}
+                        onTogglePicker={mappedPicker}
+                    />
+                </div>
+            </div>
+            {isExpanded && <ColorPicker eyedropper={eyedropper} hasTransparentOption={hasTransparentOption} value={value} onChange={onPickerChange} />}
+        </div>
+    );
+}
+
+export function ColorPickerSettingBeta({label, isExpanded, onSwatchChange, onPickerChange, onTogglePicker, value, swatches, eyedropper, hasTransparentOption, dataTestId, customToolbarContent, children}) {
+    const markClickedInside = (event) => {
+        event.stopPropagation();
+    };
+
+    return (
+        <div className="flex-col" data-testid={dataTestId} onClick={markClickedInside}>
+            <div className="flex w-full items-center justify-between text-[1.3rem]">
+                <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">{label}</div>
+
+                <div className="shrink-0 pl-2">
+                    <ColorIndicatorBeta
                         eyedropper={eyedropper}
                         hasTransparentOption={hasTransparentOption}
                         isExpanded={isExpanded}
@@ -265,7 +336,7 @@ export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerC
                         onTogglePicker={onTogglePicker}
                     >
                         {children}
-                    </ColorIndicator>
+                    </ColorIndicatorBeta>
                 </div>
             </div>
         </div>
@@ -304,3 +375,36 @@ export function MediaUploadSetting({className, label, hideLabel, onFileChange, i
         </div>
     );
 }
+
+export function MediaUploadSettingBeta({className, label, hideLabel, onFileChange, isDraggedOver, placeholderRef, src, alt, isLoading, errors = [], progress, onRemoveMedia, icon, desc, size, type, stacked, borderStyle, mimeTypes, isPinturaEnabled, openImageEditor, setFileInputRef}) {
+    return (
+        <div className={clsx(className, !stacked && 'flex justify-between gap-3')} data-testid="media-upload-setting">
+            <div className={hideLabel ? 'sr-only' : 'mb-2 shrink-0 text-sm font-medium tracking-normal text-grey-900 dark:text-grey-400'}>{label}</div>
+
+            <MediaUploaderBeta
+                alt={alt}
+                borderStyle={borderStyle}
+                className={clsx(
+                    stacked && 'h-32',
+                    !stacked && src && 'h-[5.2rem]',
+                    !stacked && type !== 'button' && !src && 'h-[5.2rem] w-[7.2rem]'
+                )}
+                desc={desc}
+                dragHandler={{isDraggedOver, setRef: placeholderRef}}
+                errors={errors}
+                icon={icon}
+                isLoading={isLoading}
+                isPinturaEnabled={isPinturaEnabled}
+                mimeTypes={mimeTypes}
+                openImageEditor={openImageEditor}
+                progress={progress}
+                setFileInputRef={setFileInputRef}
+                size={size}
+                src={src}
+                type={type}
+                onFileChange={onFileChange}
+                onRemoveMedia={onRemoveMedia}
+            />
+        </div>
+    );
+}
diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 8933d87a21..317d817742 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -7,7 +7,7 @@ import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin.
 import clsx from 'clsx';
 import defaultTheme from '../../../themes/default.js';
 import {Button} from '../Button.jsx';
-import {ButtonGroupSetting, ColorOptionSetting, ColorPickerSetting, InputSetting, InputUrlSetting, MediaUploadSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel.jsx';
+import {ButtonGroupSettingBeta, ColorOptionSettingBeta, ColorPickerSettingBeta, InputSetting, InputUrlSetting, MediaUploadSettingBeta, SettingsPanel, ToggleSetting} from '../SettingsPanel.jsx';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay.jsx';
 import {RestrictContentPlugin} from '../../../index.js';
 import {VisibilitySettings} from '../VisibilitySettings.jsx';
@@ -137,14 +137,14 @@ export function CallToActionCard({
     const designSettings = (
         <>
             {/* Layout settings */}
-            <ButtonGroupSetting
+            <ButtonGroupSettingBeta
                 buttons={layoutOptions}
                 label='Layout'
                 selectedName={layout}
                 onClick={updateLayout}
             />
             {/* Color picker */}
-            <ColorOptionSetting
+            <ColorOptionSettingBeta
                 buttons={callToActionColorPicker}
                 dataTestId='cta-background-color-picker'
                 label='Background'
@@ -159,7 +159,7 @@ export function CallToActionCard({
                 onChange={updateHasSponsorLabel}
             />
             {/* Image setting */}
-            <MediaUploadSetting
+            <MediaUploadSettingBeta
                 alt='Image'
                 borderStyle={'rounded'}
                 desc='Upload'
@@ -184,7 +184,7 @@ export function CallToActionCard({
             />
             {showButton && (
                 <>
-                    <ColorPickerSetting
+                    <ColorPickerSettingBeta
                         dataTestId='cta-button-color'
                         eyedropper={true}
                         isExpanded={buttonColorPickerExpanded}
diff --git a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
index 3336c1b826..1f20d78929 100644
--- a/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/HeaderCard/v2/HeaderCard.jsx
@@ -1,5 +1,6 @@
 import CenterAlignIcon from '../../../../../assets/icons/kg-align-center.svg?react';
 import ExpandIcon from '../../../../../assets/icons/kg-expand.svg?react';
+import ImgBgIcon from '../../../../../assets/icons/kg-img-bg.svg?react';
 import ImgFullIcon from '../../../../../assets/icons/kg-img-full.svg?react';
 import ImgRegularIcon from '../../../../../assets/icons/kg-img-regular.svg?react';
 import ImgWideIcon from '../../../../../assets/icons/kg-img-wide.svg?react';
@@ -16,9 +17,9 @@ import {ButtonGroupSetting, ColorPickerSetting, InputSetting, InputUrlSetting, M
 import {Color, textColorForBackgroundColor} from '@tryghost/color-utils';
 import {FastAverageColor} from 'fast-average-color';
 import {IconButton} from '../../../IconButton';
-import {ImageUploadSwatch} from '../../../ImageUploadSwatch';
 import {MediaUploader} from '../../../MediaUploader';
 import {ReadOnlyOverlay} from '../../../ReadOnlyOverlay';
+import {Tooltip} from '../../../Tooltip';
 import {getAccentColor} from '../../../../../utils/getAccentColor';
 import {isEditorEmpty} from '../../../../../utils/isEditorEmpty';
 // Header Card Version 2
@@ -228,12 +229,6 @@ export function HeaderCard({alignment,
         }
     };
 
-    const onBackgroundImageClickHandler = () => {
-        handleShowBackgroundImage();
-        setBackgroundColorPickerExpanded(true);
-        setButtonColorPickerExpanded(false);
-    };
-
     return (
         <>
             <div className='flex w-full font-sans text-black transition-colors ease-in-out' data-testid={'header-card-container'} style={wrapperStyle()}>
@@ -410,24 +405,36 @@ export function HeaderCard({alignment,
                             (layout !== 'split' && {
                                 title: 'Image',
                                 customContent: (
-                                    <ImageUploadSwatch
-                                        dataTestId={'header-background-image-toggle'}
-                                        showBackgroundImage={showBackgroundImage}
-                                        onClickHandler={onBackgroundImageClickHandler}
-                                    />
+                                    <button
+                                        className={clsx(
+                                            `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
+                                            showBackgroundImage && 'outline outline-2 outline-green'
+                                        )}
+                                        data-testid="header-background-image-toggle"
+                                        title="Image"
+                                        type="button"
+                                        onClick={() => {
+                                            handleShowBackgroundImage();
+                                            setBackgroundColorPickerExpanded(false);
+                                            setButtonColorPickerExpanded(false);
+                                        }}
+                                    >
+                                        <ImgBgIcon className="size-[1.4rem]" />
+                                        <Tooltip label='Image' />
+                                    </button>
                                 )
                             }),
                             {title: 'Black', hex: '#000000'},
                             {title: 'Grey', hex: '#F0F0F0'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));
                             setBackgroundColorPickerExpanded(false);
                         }}
-                        onTogglePicker={(isExpanded) => {
+                        onTogglePicker={ (isExpanded) => {
                             if (isExpanded) {
                                 if (layout !== 'split') {
                                     handleHideBackgroundImage();
@@ -443,34 +450,32 @@ export function HeaderCard({alignment,
                                 setButtonColorPickerExpanded(!isExpanded);
                             }
                         }}
-                    >
-                        {layout !== 'split' && showBackgroundImage && (
-                            <MediaUploadSetting
-                                alt='Background image'
-                                borderStyle={'rounded'}
-                                desc='Click to select image'
-                                errors={fileUploader?.errors}
-                                hideLabel={true}
-                                icon='file'
-                                isDraggedOver={imageDragHandler?.isDraggedOver}
-                                isLoading={isLoading}
-                                isPinturaEnabled={isPinturaEnabled}
-                                mimeTypes={['image/*']}
-                                openImageEditor={openImageEditor}
-                                placeholderRef={imageDragHandler?.setRef}
-                                progress={progress}
-                                setFileInputRef={setFileInputRef} // Ensure ref is properly passed
-                                size='xsmall'
-                                src={backgroundImageSrc}
-                                stacked={true}
-                                onFileChange={onFileChange}
-                                onRemoveMedia={() => {
-                                    handleClearBackgroundImage();
-                                    handleTextColor(matchingTextColor(backgroundColor));
-                                }}
-                            />
-                        )}
-                    </ColorPickerSetting>
+                    />
+                    <MediaUploadSetting
+                        alt='Background image'
+                        borderStyle={'rounded'}
+                        className={(!showBackgroundImage || layout === 'split') && 'hidden'}
+                        errors={fileUploader?.errors}
+                        hideLabel={layout !== 'split'}
+                        icon='file'
+                        isDraggedOver={imageDragHandler?.isDraggedOver}
+                        isLoading={isLoading}
+                        isPinturaEnabled={isPinturaEnabled}
+                        label='Image'
+                        mimeTypes={['image/*']}
+                        openImageEditor={openImageEditor}
+                        placeholderRef={imageDragHandler?.setRef}
+                        progress={progress}
+                        setFileInputRef={setFileInputRef}
+                        size='xsmall'
+                        src={backgroundImageSrc}
+                        stacked={true}
+                        onFileChange={onFileChange}
+                        onRemoveMedia={() => {
+                            handleClearBackgroundImage();
+                            handleTextColor(matchingTextColor(backgroundColor));
+                        }}
+                    />
 
                     {/* Button settings */}
                     <ToggleSetting
diff --git a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
index 3a6c7e8b41..f93898e0dc 100644
--- a/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/SignupCard.jsx
@@ -1,5 +1,6 @@
 import CenterAlignIcon from '../../../assets/icons/kg-align-center.svg?react';
 import ExpandIcon from '../../../assets/icons/kg-expand.svg?react';
+import ImgBgIcon from '../../../assets/icons/kg-img-bg.svg?react';
 import ImgFullIcon from '../../../assets/icons/kg-img-full.svg?react';
 import ImgRegularIcon from '../../../assets/icons/kg-img-regular.svg?react';
 import ImgWideIcon from '../../../assets/icons/kg-img-wide.svg?react';
@@ -15,10 +16,10 @@ import {ButtonGroupSetting, ColorPickerSetting, InputSetting, MediaUploadSetting
 import {Color, textColorForBackgroundColor} from '@tryghost/color-utils';
 import {FastAverageColor} from 'fast-average-color';
 import {IconButton} from '../IconButton';
-import {ImageUploadSwatch} from '../ImageUploadSwatch';
 import {MediaUploader} from '../MediaUploader';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
 import {SubscribeForm} from '../SubscribeForm';
+import {Tooltip} from '../Tooltip';
 import {getAccentColor} from '../../../utils/getAccentColor';
 import {isEditorEmpty} from '../../../utils/isEditorEmpty';
 
@@ -207,12 +208,6 @@ export function SignupCard({alignment,
 
     const correctedBackgroundSize = backgroundSize === 'contain' && backgroundImageSrc ? 'contain' : 'cover';
 
-    const onBackgroundImageClickHandler = () => {
-        handleShowBackgroundImage();
-        setBackgroundColorPickerExpanded(true);
-        setButtonColorPickerExpanded(false);
-    };
-
     return (
         <>
             <div className='flex w-full font-sans text-black transition-colors ease-in-out' data-testid={'signup-card-container'} style={wrapperStyle()}>
@@ -408,18 +403,30 @@ export function SignupCard({alignment,
                             (layout !== 'split' && {
                                 title: 'Image',
                                 customContent: (
-                                    <ImageUploadSwatch
-                                        dataTestId='signup-background-image-toggle'
-                                        showBackgroundImage={showBackgroundImage}
-                                        onClickHandler={onBackgroundImageClickHandler}
-                                    />
+                                    <button
+                                        className={clsx(
+                                            `group relative flex size-6 shrink-0 items-center justify-center rounded-full border border-grey-300 bg-grey-100 text-black`,
+                                            showBackgroundImage && 'outline outline-2 outline-green'
+                                        )}
+                                        data-testid="signup-background-image-toggle"
+                                        title="Image"
+                                        type="button"
+                                        onClick={() => {
+                                            handleShowBackgroundImage();
+                                            setBackgroundColorPickerExpanded(false);
+                                            setButtonColorPickerExpanded(false);
+                                        }}
+                                    >
+                                        <ImgBgIcon className="size-[1.4rem]" />
+                                        <Tooltip label='Image' />
+                                    </button>
                                 )
                             }),
                             {title: 'Grey', hex: '#F0F0F0'},
                             {title: 'Black', hex: '#000000'},
                             {title: 'Brand color', accent: true}
                         ].filter(Boolean)}
-                        value={(showBackgroundImage && layout !== 'split') ? 'image' : backgroundColor}
+                        value={(showBackgroundImage && layout !== 'split') ? '' : backgroundColor}
                         onPickerChange={color => handleBackgroundColor(color, matchingTextColor(color))}
                         onSwatchChange={(color) => {
                             handleBackgroundColor(color, matchingTextColor(color));
@@ -441,34 +448,33 @@ export function SignupCard({alignment,
                                 setButtonColorPickerExpanded(!isExpanded);
                             }
                         }}
-                    >
-                        {layout !== 'split' && showBackgroundImage && (
-                            <MediaUploadSetting
-                                alt='Background image'
-                                borderStyle={'rounded'}
-                                desc='Click to select image'
-                                errors={fileUploader?.errors}
-                                hideLabel={true}
-                                icon='file'
-                                isDraggedOver={imageDragHandler?.isDraggedOver}
-                                isLoading={isLoading}
-                                isPinturaEnabled={isPinturaEnabled}
-                                mimeTypes={['image/*']}
-                                openImageEditor={openImageEditor}
-                                placeholderRef={imageDragHandler?.setRef}
-                                progress={progress}
-                                setFileInputRef={setFileInputRef}
-                                size='xsmall'
-                                src={backgroundImageSrc}
-                                stacked={true}
-                                onFileChange={onFileChange}
-                                onRemoveMedia={() => {
-                                    handleClearBackgroundImage();
-                                    handleTextColor(matchingTextColor(backgroundColor));
-                                }}
-                            />
-                        )}
-                    </ColorPickerSetting>
+                    />
+
+                    <MediaUploadSetting
+                        alt='Background image'
+                        borderStyle={'rounded'}
+                        className={(!showBackgroundImage || layout === 'split') && 'hidden'}
+                        errors={fileUploader?.errors}
+                        hideLabel={layout !== 'split'}
+                        icon='file'
+                        isDraggedOver={imageDragHandler?.isDraggedOver}
+                        isLoading={isLoading}
+                        isPinturaEnabled={isPinturaEnabled}
+                        label='Image'
+                        mimeTypes={['image/*']}
+                        openImageEditor={openImageEditor}
+                        placeholderRef={imageDragHandler?.setRef}
+                        progress={progress}
+                        setFileInputRef={setFileInputRef}
+                        size='xsmall'
+                        src={backgroundImageSrc}
+                        stacked={true}
+                        onFileChange={onFileChange}
+                        onRemoveMedia={() => {
+                            handleClearBackgroundImage();
+                            handleTextColor(matchingTextColor(backgroundColor));
+                        }}
+                    />
 
                     <ColorPickerSetting
                         dataTestId='signup-button-color'
diff --git a/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx b/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
index c05b6d06b6..fc8b80dec2 100644
--- a/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/VideoCard.jsx
@@ -99,7 +99,6 @@ function PopulatedVideoCard({
                                 alt='Custom thumbnail'
                                 borderStyle={'rounded'}
                                 dataTestId="custom-thumbnail-replace"
-                                desc='Upload'
                                 errors={customThumbnailUploader.errors}
                                 icon='file'
                                 isDraggedOver={thumbnailDragHandler.isDraggedOver}
@@ -108,8 +107,8 @@ function PopulatedVideoCard({
                                 mimeTypes={thumbnailMimeTypes}
                                 placeholderRef={thumbnailDragHandler.setRef}
                                 progress={customThumbnailUploader.progress}
+                                size='xsmall'
                                 src={customThumbnail}
-                                type='button'
                                 onFileChange={onCustomThumbnailChange}
                                 onRemoveMedia={onRemoveCustomThumbnail}
                             />
diff --git a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
index 3cc5bdb024..467af9c8c1 100644
--- a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js
@@ -1,5 +1,5 @@
 import {assertHTML, createSnippet, focusEditor, html, initialize, insertCard, isMac} from '../../utils/e2e';
-import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
+// import {calloutColorPicker} from '../../../src/components/ui/cards/CalloutCardx';
 import {expect, test} from '@playwright/test';
 
 test.describe('Callout Card', async () => {
@@ -125,23 +125,26 @@ test.describe('Callout Card', async () => {
         await expect(emojiPickerContainer).toBeVisible();
     });
 
-    // test('colour picker renders all colours', async function () {
-    // await focusEditor(page);
-    // await insertCard(page, {cardName: 'callout'});
+    test('colour picker renders all colours', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'callout'});
 
-    //     // await Promise.all(calloutColorPicker.map(async (color) => {
-    //     //     const colorPicker = page.locator(`[data-test-id="color-picker-${color.name}"]`);
-    //     //     await expect(colorPicker).toBeVisible();
-    //     // }));
-    // });
+        // await Promise.all(calloutColorPicker.map(async (color) => {
+        //     const colorPicker = page.locator(`[data-test-id="color-picker-${color.name}"]`);
+        //     await expect(colorPicker).toBeVisible();
+        // }));
+    });
 
-    test('can change background color to green', async function () {
+    test('can change background color', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'callout'});
-        await cardBackgroundColorSettings(page, {
-            cardColorPickerTestId: 'callout-color-picker',
-            colorTestId: 'color-picker-green'
-        });
+
+        const colorPicker = page.locator(`[data-test-id="color-picker-green"]`);
+        await colorPicker.click();
+
+        // ensure data-test-id="callout-bg-blue" is visible
+        const greenCallout = page.locator('[data-testid="callout-bg-green"]');
+        await expect(greenCallout).toBeVisible();
     });
 
     test('can select an emoji', async function () {
@@ -312,11 +315,8 @@ test.describe('Callout Card', async () => {
         await page.keyboard.type('Hello ');
 
         // Change color
-        // await page.locator(`[data-test-id="color-picker-green"]`).click();
-        await cardBackgroundColorSettings(page, {
-            cardColorPickerTestId: 'callout-color-picker',
-            colorTestId: 'color-picker-green'
-        });
+        await page.locator(`[data-test-id="color-picker-green"]`).click();
+
         // Continue editing the content
         await page.keyboard.type('world');
 
diff --git a/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js b/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js
index 50d610f135..9c14befb78 100644
--- a/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js
@@ -507,7 +507,8 @@ test.describe('Gallery card', async () => {
             const fileChooser = await fileChooserPromise;
             await fileChooser.setFiles(filePaths);
 
-            await expect(page.locator('[data-testid="gallery-image"]')).toHaveCount(9);
+            await expect(page.getByTestId('progress-bar')).not.toBeVisible();
+            await expect(page.getByTestId('gallery-image')).toHaveCount(9);
         });
 
         const editorState = await getEditorState(page);
diff --git a/packages/koenig-lexical/test/e2e/cards/header-card.test.js b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
index cb7ca3f33d..a7c0c8fdf8 100644
--- a/packages/koenig-lexical/test/e2e/cards/header-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/header-card.test.js
@@ -1,6 +1,5 @@
 import path from 'path';
 import {assertHTML, focusEditor, html, initialize, isMac} from '../../utils/e2e';
-import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -187,8 +186,8 @@ test.describe('Header card V1', async () => {
         await createHeaderCard({page});
 
         // Check that the default size is small
-        await expect(page.getByLabel('S')).toHaveClass(/ shadow-xs /);
-        await expect(page.getByLabel('M')).not.toHaveClass(/ shadow-xs /);
+        await expect(page.getByLabel('S')).toHaveClass(/ bg-grey-150 /);
+        await expect(page.getByLabel('M')).not.toHaveClass(/ bg-grey-150 /);
 
         // Get height of the card
         const box = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -196,7 +195,7 @@ test.describe('Header card V1', async () => {
 
         // Click on the medium button
         await page.getByLabel('M').click();
-        await expect(page.getByLabel('M')).toHaveClass(/ shadow-xs /);
+        await expect(page.getByLabel('M')).toHaveClass(/ bg-grey-150 /);
 
         // Check that the height has changed
         const box2 = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -207,7 +206,7 @@ test.describe('Header card V1', async () => {
         // Switch to large
         const largeButton = page.locator('[aria-label="L"]');
         await largeButton.click();
-        await expect(largeButton).toHaveClass(/ shadow-xs /);
+        await expect(largeButton).toHaveClass(/ bg-grey-150 /);
 
         // Check that the height has changed
         const box3 = await page.locator('[data-kg-card="header"] > div:first-child').nth(0).boundingBox();
@@ -219,23 +218,27 @@ test.describe('Header card V1', async () => {
     test('can change the background color', async function () {
         await createHeaderCard({page});
 
+        const lightButton = page.locator('[aria-label="Light"]');
+        const darkButton = page.locator('[aria-label="Dark"]');
+        const accentButton = page.locator('[aria-label="Accent"]');
+
         // Default class should be 'bg-black' on the card
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-black /);
 
         // Switch to light
-        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-light'});
+        await lightButton.click();
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-grey-100 /);
 
         // Switch back to dark
-        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-dark'});
+        await darkButton.click();
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-black /);
 
         // Switch to accent
-        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', colorTestId: 'color-picker-accent'});
+        await accentButton.click();
 
         // Check that the background color has changed
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveClass(/ bg-accent /);
@@ -248,9 +251,8 @@ test.describe('Header card V1', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'background-image-color-button'});
-        // click on text saying Click to upload background image
-        await page.getByText('Click to upload background image').click();
+        // Click data-testid="background-image-color-button"
+        await page.click('[data-testid="background-image-color-button"]');
 
         // Set files
         const fileChooser = await fileChooserPromise;
@@ -526,12 +528,10 @@ test.describe('Header card V2', () => {
 
         await page.click('[data-testid="header-button-toggle"]');
 
-        // await page.click('[data-testid="header-button-color"] [aria-label="Pick color"]');
-
-        // await page.fill('[data-testid="header-button-color"] input', '');
-        // await page.keyboard.type('ff0000');
+        await page.click('[data-testid="header-button-color"] [aria-label="Pick color"]');
 
-        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-button-color', customColor: 'ff0000'});
+        await page.fill('[data-testid="header-button-color"] input', '');
+        await page.keyboard.type('ff0000');
 
         // Selected colour should be applied inline
         await expect(page.locator('[data-testid="header-card-button"]')).toHaveCSS('background-color', 'rgb(255, 0, 0)');
@@ -548,12 +548,10 @@ test.describe('Header card V2', () => {
     test('can change the background color and text color', async function () {
         await createHeaderCard({page, version: 2});
 
-        await cardBackgroundColorSettings(page, {cardColorPickerTestId: 'header-background-color', customColor: 'ff0000'});
-
-        // await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
+        await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
 
-        // await page.fill('[data-testid="header-background-color"] input', '');
-        // await page.keyboard.type('ff0000');
+        await page.fill('[data-testid="header-background-color"] input', '');
+        await page.keyboard.type('ff0000');
 
         // Selected colour should be applied inline
         const container = page.getByTestId('header-card-container');
@@ -571,12 +569,12 @@ test.describe('Header card V2', () => {
     test('can switch between background image and color', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
         await createHeaderCard({page, version: 2});
-
         // Choose an image
+
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
+        await page.click('[data-testid="header-background-image-toggle"]');
+
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
 
@@ -586,16 +584,15 @@ test.describe('Header card V2', () => {
 
         // Switch to a color swatch
 
-        // await page.click('[data-testid="header-background-color"] button[title="Black"]');
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', findByColorTitle: 'Black'});
+        await page.click('[data-testid="header-background-color"] button[title="Black"]');
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
 
-        // // Switch back to the image
+        // Switch back to the image
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
+        await page.click('[data-testid="header-background-image-toggle"]');
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-testid="media-upload-setting"]')).toBeVisible();
@@ -603,36 +600,13 @@ test.describe('Header card V2', () => {
 
         // Open the color picker
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'header-background-color', customColor: '000000'});
+        await page.click('[data-testid="header-background-color"] [aria-label="Pick color"]');
 
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="header"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
     });
-    
-    test('has image icon when background image is selected', async function (){
-        const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
-        await createHeaderCard({page, version: 2});
 
-        // Choose an image
-        const fileChooserPromise = page.waitForEvent('filechooser');
-
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'header-background-color', imageUploadId: 'header-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
-        const fileChooser = await fileChooserPromise;
-        await fileChooser.setFiles([filePath]);
-
-        // Check if it is set as a background image
-
-        // Check if it is also set as an image in the panel
-        await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
-
-        const parentLocator = page.locator('[data-testid="color-selector-button"]');
-        const iconHtml = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-[1.4rem]"><path fill="currentColor" fill-rule="evenodd" d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z" clip-rule="evenodd"></path><circle cx="8" cy="6" r="3" fill="currentColor"></circle></svg>';
-        const parentHtml = await parentLocator.innerHTML();
-
-        await expect(parentHtml).toContain(iconHtml);
-    });
     test('can add and remove background image in split layout', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
         const fileChooserPromise = page.waitForEvent('filechooser');
diff --git a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
index c4461127c3..dcade04015 100644
--- a/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/signup-card.test.js
@@ -1,6 +1,5 @@
 import path from 'path';
 import {assertHTML, focusEditor, html, initialize, insertCard} from '../../utils/e2e';
-import {cardBackgroundColorSettings} from '../../utils/background-color-helper';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -199,14 +198,14 @@ test.describe('Signup card', async () => {
         await expect(page.getByTestId('signup-card-button')).toHaveText('Subscribe now');
     });
 
-    test('can change the button color and text color', async function () {
+    test('can change the button background color and text color', async function () {
         await focusEditor(page);
         await insertCard(page, {cardName: 'signup'});
 
-        await cardBackgroundColorSettings(page, {
-            customColor: 'ff0000',
-            cardColorPickerTestId: 'signup-button-color'
-        });
+        await page.click('[data-testid="signup-button-color"] [aria-label="Pick color"]');
+
+        await page.fill('[data-testid="signup-button-color"] input', '');
+        await page.keyboard.type('ff0000');
 
         // Selected colour should be applied inline
         await expect(page.locator('[data-testid="signup-card-button"]')).toHaveCSS('background-color', 'rgb(255, 0, 0)');
@@ -224,10 +223,10 @@ test.describe('Signup card', async () => {
         await focusEditor(page);
         await insertCard(page, {cardName: 'signup'});
 
-        await cardBackgroundColorSettings(page, {
-            customColor: 'ff0000',
-            cardColorPickerTestId: 'signup-background-color'
-        });
+        await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
+
+        await page.fill('[data-testid="signup-background-color"] input', '');
+        await page.keyboard.type('ff0000');
 
         // Selected colour should be applied inline
         const container = page.getByTestId('signup-card-container');
@@ -250,8 +249,7 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
+        await page.click('[data-testid="signup-background-image-toggle"]');
 
         // Set files
         const fileChooser = await fileChooserPromise;
@@ -281,34 +279,6 @@ test.describe('Signup card', async () => {
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
     });
 
-    test('has image icon when background image is selected', async function (){
-        const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
-
-        await focusEditor(page);
-        await insertCard(page, {cardName: 'signup'});
-
-        const fileChooserPromise = page.waitForEvent('filechooser');
-
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
-
-        // Set files
-        const fileChooser = await fileChooserPromise;
-        await fileChooser.setFiles([filePath]);
-
-        // Check if it is set as a background image
-        await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);
-
-        // Check if it is also set as an image in the panel
-        await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
-
-        const parentLocator = page.locator('[data-testid="color-selector-button"]');
-        const iconHtml = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="size-[1.4rem]"><path fill="currentColor" fill-rule="evenodd" d="M22.883 19.771a.786.786 0 0 1-.668.372H1.785a.786.786 0 0 1-.666-1.202l3.93-6.286a.785.785 0 0 1 1.269-.086l3.292 3.95 6.476-8.633a.81.81 0 0 1 .7-.315.786.786 0 0 1 .628.431l5.5 11a.785.785 0 0 1-.03.769Z" clip-rule="evenodd"></path><circle cx="8" cy="6" r="3" fill="currentColor"></circle></svg>';
-        const parentHtml = await parentLocator.innerHTML();
-
-        await expect(parentHtml).toContain(iconHtml);
-    });
-
     test('can switch between background image and color', async function () {
         const filePath = path.relative(process.cwd(), __dirname + `/../fixtures/large-image.jpeg`);
 
@@ -319,8 +289,7 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
+        await page.click('[data-testid="signup-background-image-toggle"]');
 
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
@@ -331,24 +300,23 @@ test.describe('Signup card', async () => {
 
         // Switch to a color swatch
 
-        // await page.click('[data-testid="signup-background-color"] button[title="Black"]');
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', findByColorTitle: 'Black'});
+        await page.click('[data-testid="signup-background-color"] button[title="Black"]');
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
         await expect(page.locator('[data-testid="media-upload-setting"]')).not.toBeVisible();
 
-        // // Switch back to the image
+        // Switch back to the image
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
+        await page.click('[data-testid="signup-background-image-toggle"]');
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-testid="media-upload-setting"]')).toBeVisible();
         await expect(page.locator('[data-testid="media-upload-filled"] img')).toHaveAttribute('src', /blob:/);
 
-        // // Open the color picker
+        // Open the color picker
 
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', customColor: '000000'});
+        await page.click('[data-testid="signup-background-color"] [aria-label="Pick color"]');
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
@@ -363,8 +331,7 @@ test.describe('Signup card', async () => {
 
         // Text colour is updated based on the background colour
 
-        // await page.click('[data-testid="signup-background-color"] button[title="Grey"]');
-        await cardBackgroundColorSettings(page, {fireColorSetting: true, cardColorPickerTestId: 'signup-background-color', findByColorTitle: 'Grey'});
+        await page.click('[data-testid="signup-background-color"] button[title="Grey"]');
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-color', 'rgb(240, 240, 240)');
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('color', 'rgb(0, 0, 0)');
@@ -373,9 +340,8 @@ test.describe('Signup card', async () => {
 
         const fileChooserPromise = page.waitForEvent('filechooser');
 
-        // await page.click('[data-testid="signup-background-image-toggle"]');
-        await cardBackgroundColorSettings(page, {fireColorSetting: false, cardColorPickerTestId: 'signup-background-color', imageUploadId: 'signup-background-image-toggle'});
-        await page.click('[data-testid="media-upload-placeholder"]');
+        await page.click('[data-testid="signup-background-image-toggle"]');
+
         const fileChooser = await fileChooserPromise;
         await fileChooser.setFiles([filePath]);
 
@@ -384,8 +350,6 @@ test.describe('Signup card', async () => {
 
         // When switching to split layout, text colour is set based on the background colour
 
-        await page.locator('[data-testid="settings-panel"]').click();
-
         await page.locator('[data-testid="signup-layout-split"]').click();
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).not.toHaveCSS('background-image', /blob:/);
@@ -394,10 +358,6 @@ test.describe('Signup card', async () => {
 
         // When switching back from split layout, text colour is set based on the background colour
 
-        // data-testid="settings-panel"
-
-        await page.locator('[data-testid="settings-panel"]').click(); // click here to close the colour swatch
-
         await page.locator('[data-testid="signup-layout-wide"]').click();
 
         await expect(page.locator('[data-kg-card="signup"] > div:first-child')).toHaveCSS('background-image', /blob:/);

From f327cb24942903c9ede348b1308f2f27a3bff0af Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 09:26:29 +0000
Subject: [PATCH 28/41] fixed CalloutCard background color setting layout

---
 packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
index e00576b1ce..f40bb1c50f 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx
@@ -158,6 +158,7 @@ export function CalloutCard({
                             buttons={calloutColorPicker}
                             dataTestId='callout-color-picker'
                             label='Background'
+                            layout='stacked'
                             selectedName={color}
                             onClick={handleColorChange}
                         />

From a67e9d7b58151bc9aeb77eb553b8e895134baf46 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 09:54:26 +0000
Subject: [PATCH 29/41] fixed default button text color

---
 .../nodes/call-to-action/CallToActionNode.js  |  2 +-
 .../call-to-action/calltoaction-renderer.js   | 21 ++++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
index 4feba96661..6b423afec2 100644
--- a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
+++ b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
@@ -12,7 +12,7 @@ export class CallToActionNode extends generateDecoratorNode({
         {name: 'buttonText', default: 'Learn more'},
         {name: 'buttonUrl', default: ''},
         {name: 'buttonColor', default: '#000000'}, // Where colour is customisable, we should use hex values
-        {name: 'buttonTextColor', default: ''},
+        {name: 'buttonTextColor', default: '#ffffff'},
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
         {name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js b/packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js
index 61e9abbe91..337682c651 100644
--- a/packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js
+++ b/packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js
@@ -33,8 +33,7 @@ function ctaCardTemplate(dataset) {
                         </div>
                     ` : ''}
                     ${dataset.showButton ? `
-                        <a href="${dataset.buttonUrl}" class="kg-cta-button ${buttonAccent}"
-                        ${buttonStyle}>
+                        <a href="${dataset.buttonUrl}" class="kg-cta-button ${buttonAccent}" ${buttonStyle}>
                             ${dataset.buttonText}
                         </a>
                         ` : ''}
@@ -46,12 +45,12 @@ function ctaCardTemplate(dataset) {
 }
 
 function emailCTATemplate(dataset, options = {}) {
-    const buttonStyle = dataset.buttonColor === 'accent' 
-        ? `color: ${dataset.buttonTextColor};` 
+    const buttonStyle = dataset.buttonColor === 'accent'
+        ? `color: ${dataset.buttonTextColor};`
         : `background-color: ${dataset.buttonColor}; color: ${dataset.buttonTextColor};`;
 
     let imageDimensions;
-    
+
     if (dataset.imageUrl && dataset.imageWidth && dataset.imageHeight) {
         imageDimensions = {
             width: dataset.imageWidth,
@@ -98,9 +97,10 @@ function emailCTATemplate(dataset, options = {}) {
                                                 <table border="0" cellpadding="0" cellspacing="0" class="kg-cta-button-wrapper">
                                                     <tr>
                                                         <td class="${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}" style="${buttonStyle}">
-                                                            <a href="${dataset.buttonUrl}" 
+                                                            <a href="${dataset.buttonUrl}"
                                                                class="kg-cta-button ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}"
-                                                               style="${buttonStyle}">
+                                                               style="${buttonStyle}"
+                                                            >
                                                                 ${dataset.buttonText}
                                                             </a>
                                                         </td>
@@ -146,9 +146,10 @@ function emailCTATemplate(dataset, options = {}) {
                                     <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                         <tr>
                                             <td class="kg-cta-button-wrapper ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}" style="${buttonStyle}">
-                                                <a href="${dataset.buttonUrl}" 
-                                                   class="kg-cta-button ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}"  
-                                                   style="${buttonStyle}">
+                                                <a href="${dataset.buttonUrl}"
+                                                   class="kg-cta-button ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}"
+                                                   style="${buttonStyle}"
+                                                >
                                                     ${dataset.buttonText}
                                                 </a>
                                             </td>

From 286ff6ea2eb5c1ec371bb59da0735d8848788a2f Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:07:15 +0000
Subject: [PATCH 30/41] fixed tests

---
 .../lib/nodes/call-to-action/CallToActionNode.js       |  1 -
 .../kg-default-nodes/test/nodes/call-to-action.test.js | 10 ++++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
index 6b423afec2..60547c3922 100644
--- a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
+++ b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
@@ -16,7 +16,6 @@ export class CallToActionNode extends generateDecoratorNode({
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
         {name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
-        {name: 'hasImage', default: false},
         {name: 'imageUrl', default: ''},
         {name: 'imageWidth', default: null},
         {name: 'imageHeight', default: null}
diff --git a/packages/kg-default-nodes/test/nodes/call-to-action.test.js b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
index 93bb5a8e9f..e844c478ad 100644
--- a/packages/kg-default-nodes/test/nodes/call-to-action.test.js
+++ b/packages/kg-default-nodes/test/nodes/call-to-action.test.js
@@ -101,7 +101,7 @@ describe('CallToActionNode', function () {
             callToActionNode.buttonColor = '#ffffff';
             callToActionNode.buttonColor.should.equal('#ffffff');
 
-            callToActionNode.buttonTextColor.should.equal('');
+            callToActionNode.buttonTextColor.should.equal('#ffffff');
             callToActionNode.buttonTextColor = 'black';
             callToActionNode.buttonTextColor.should.equal('black');
 
@@ -113,7 +113,7 @@ describe('CallToActionNode', function () {
             callToActionNode.backgroundColor = 'red';
             callToActionNode.backgroundColor.should.equal('red');
 
-            should(callToActionNode.imageUrl).be.null();
+            callToActionNode.imageUrl.should.equal('');
             callToActionNode.imageUrl = 'http://blog.com/image1.jpg';
             callToActionNode.imageUrl.should.equal('http://blog.com/image1.jpg');
 
@@ -259,7 +259,6 @@ describe('CallToActionNode', function () {
                 buttonText: 'Get access now',
                 buttonTextColor: '#000000',
                 buttonUrl: 'http://someblog.com/somepost',
-                hasImage: true,
                 hasSponsorLabel: true,
                 sponsorLabel: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>',
                 imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
@@ -276,7 +275,7 @@ describe('CallToActionNode', function () {
             html.should.containEql('Get access now');
             html.should.containEql('http://someblog.com/somepost');
             html.should.containEql('<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'); // because hasSponsorLabel is true
-            html.should.containEql('/content/images/size/w64h64/2022/11/koenig-lexical.jpg'); // because hasImage is true
+            html.should.containEql('/content/images/size/w64h64/2022/11/koenig-lexical.jpg');
             html.should.containEql('This is a new CTA Card via email.');
         }));
 
@@ -289,7 +288,6 @@ describe('CallToActionNode', function () {
                 buttonText: 'Get access now',
                 buttonTextColor: '#000000',
                 buttonUrl: 'http://someblog.com/somepost',
-                hasImage: true,
                 hasSponsorLabel: true,
                 sponsorLabel: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>',
                 imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
@@ -301,7 +299,7 @@ describe('CallToActionNode', function () {
             const {element} = callToActionNode.exportDOM(exportOptions);
 
             const html = element.outerHTML.toString();
-            html.should.containEql('/content/images/size/w256h256/2022/11/koenig-lexical.jpg'); // because hasImage is true
+            html.should.containEql('/content/images/size/w256h256/2022/11/koenig-lexical.jpg');
         }));
 
         it('renders email with img width and height when immersive', editorTest(function () {

From 11cf9a671096bba3048d500f5c573ac76288b5a0 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 3 Mar 2025 11:10:35 +0100
Subject: [PATCH 31/41] Removed tooltip from layout buttons in call to action
 card

No ref
- There's no good way to describe the layout nuances in a single word, so tooltip is confusing rather than helpful
- Added more descriptive aria labels to layout buttons
---
 .../src/components/ui/ButtonGroupBeta.jsx         | 15 +++++++++------
 .../src/components/ui/SettingsPanel.jsx           |  4 ++--
 .../src/components/ui/cards/CallToActionCard.jsx  |  9 ++++++---
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
index dc15eed61a..8f0b1026b9 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -4,14 +4,16 @@ import React from 'react';
 import {Tooltip} from './Tooltip';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
-export function ButtonGroupBeta({buttons = [], selectedName, onClick}) {
+export function ButtonGroupBeta({buttons = [], selectedName, onClick, hasTooltip = true}) {
     return (
         <div className="flex">
             <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
-                {buttons.map(({label, name, Icon, dataTestId}) => (
+                {buttons.map(({label, name, Icon, dataTestId, ariaLabel}) => (
                     <IconButton
                         key={`${name}-${label}`}
+                        ariaLabel={ariaLabel}
                         dataTestId={dataTestId}
+                        hasTooltip={hasTooltip}
                         Icon={Icon}
                         label={label}
                         name={name}
@@ -24,7 +26,7 @@ export function ButtonGroupBeta({buttons = [], selectedName, onClick}) {
     );
 }
 
-export function IconButton({dataTestId, onClick, label, name, selectedName, Icon}) {
+export function IconButton({dataTestId, onClick, label, ariaLabel, name, selectedName, Icon, hasTooltip}) {
     const isActive = name === selectedName;
 
     const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
@@ -32,7 +34,7 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
     return (
         <li className="mb-0">
             <button
-                aria-label={label}
+                aria-label={ariaLabel || label}
                 className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 type="button"
@@ -40,12 +42,13 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
                 onMouseDown={handleMousedown}
             >
                 {Icon ? <Icon className="size-4 stroke-2" /> : label}
-                {(Icon && label) && <Tooltip label={label} />}
+                {(Icon && label && hasTooltip) && <Tooltip label={label} />}
             </button>
         </li>
     );
 }
 
 ButtonGroupBeta.propTypes = {
-    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive'])
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive']),
+    hasTooltip: PropTypes.bool
 };
diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
index bda5cc9d06..4d99536a60 100644
--- a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
+++ b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
@@ -235,13 +235,13 @@ export function ButtonGroupSetting({label, onClick, selectedName, buttons}) {
     );
 }
 
-export function ButtonGroupSettingBeta({label, onClick, selectedName, buttons}) {
+export function ButtonGroupSettingBeta({label, onClick, selectedName, buttons, hasTooltip}) {
     return (
         <div className="flex w-full items-center justify-between text-[1.3rem]">
             <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">{label}</div>
 
             <div className="shrink-0 pl-2">
-                <ButtonGroupBeta buttons={buttons} selectedName={selectedName} onClick={onClick} />
+                <ButtonGroupBeta buttons={buttons} hasTooltip={hasTooltip} selectedName={selectedName} onClick={onClick} />
             </div>
         </div>
     );
diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index 317d817742..cdf226104d 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -120,13 +120,15 @@ export function CallToActionCard({
             label: 'Minimal',
             name: 'minimal',
             Icon: MinimalLayoutIcon,
-            dataTestId: 'minimal-layout'
+            dataTestId: 'minimal-layout',
+            ariaLabel: 'Left-aligned layout with small, square image'
         },
         {
             label: 'Immersive',
             name: 'immersive',
             Icon: ImmersiveLayoutIcon,
-            dataTestId: 'immersive-layout'
+            dataTestId: 'immersive-layout',
+            ariaLabel: 'Center-aligned layout with full-width image and button'
         }
     ];
 
@@ -139,6 +141,7 @@ export function CallToActionCard({
             {/* Layout settings */}
             <ButtonGroupSettingBeta
                 buttons={layoutOptions}
+                hasTooltip={false}
                 label='Layout'
                 selectedName={layout}
                 onClick={updateLayout}
@@ -255,7 +258,7 @@ export function CallToActionCard({
                             initialTheme={sponsoredLabelTheme}
                             nodes='basic'
                             textClassName={clsx(
-                                'koenig-lexical-cta-label not-kg-prose w-full whitespace-normal font-sans !text-xs font-semibold uppercase leading-8 tracking-normal text-grey-900/40 dark:text-grey-200/40'
+                                'koenig-lexical-cta-label not-kg-prose w-full whitespace-normal font-sans !text-xs font-semibold uppercase leading-8 tracking-normal text-grey-900/50 dark:text-grey-200/40'
                             )}
                             useDefaultClasses={false}
                         >

From ec790b29ced21daef6c3478afc5bee26cdd2c08a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:17:15 +0000
Subject: [PATCH 32/41] added missing prop types to <MediaUploaderBeta>

---
 .../src/components/ui/MediaUploaderBeta.jsx   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
index 57b5fae7d8..1a8460f52c 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
@@ -116,24 +116,25 @@ export function MediaUploaderBeta({
 }
 
 MediaUploaderBeta.propTypes = {
-    className: PropTypes.string,
-    src: PropTypes.string,
+    additionalActions: PropTypes.node,
     alt: PropTypes.string,
+    backgroundSize: PropTypes.oneOf(['cover', 'contain']),
+    borderStyle: PropTypes.string,
+    className: PropTypes.string,
     desc: PropTypes.string,
+    dragHandler: PropTypes.shape({isDraggedOver: PropTypes.bool, setRef: PropTypes.func}),
+    errors: PropTypes.arrayOf(PropTypes.shape({message: PropTypes.string})),
     icon: PropTypes.string,
-    size: PropTypes.string,
-    type: PropTypes.oneOf(['image', 'button']),
-    borderStyle: PropTypes.string,
+    imgClassName: PropTypes.string,
+    isEditing: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isPinturaEnabled: PropTypes.bool,
     mimeTypes: PropTypes.arrayOf(PropTypes.string),
     onFileChange: PropTypes.func,
-    dragHandler: PropTypes.shape({
-        isDraggedOver: PropTypes.bool,
-        setRef: PropTypes.func
-    }),
-    isLoading: PropTypes.bool,
+    onRemoveMedia: PropTypes.func,
     progress: PropTypes.number,
-    errors: PropTypes.arrayOf(PropTypes.shape({
-        message: PropTypes.string
-    })),
-    onRemoveMedia: PropTypes.func
+    setFileInputRef: PropTypes.func,
+    size: PropTypes.string,
+    src: PropTypes.string,
+    type: PropTypes.oneOf(['image', 'button'])
 };

From ba2fc9567149312e01d32b21a410249029ae2e5d Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:18:47 +0000
Subject: [PATCH 33/41] avoid global Error override in
 MediaPlaceholderBeta.stories

---
 .../src/components/ui/MediaPlaceholderBeta.stories.jsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
index c0c073e0c8..3cb3163406 100644
--- a/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaPlaceholderBeta.stories.jsx
@@ -81,8 +81,8 @@ Product.args = {
     borderStyle: 'squared'
 };
 
-export const Error = Template.bind({});
-Error.args = {
+export const ErrorState = Template.bind({});
+ErrorState.args = {
     icon: 'video',
     desc: 'Click to select a video',
     size: 'medium',

From 5c48803fe195c6ed33339ab79f50464f9e6ede04 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:22:18 +0000
Subject: [PATCH 34/41] renamed IconButton export in ButtonGroupBeta to avoid
 duplicate naming

---
 packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx | 4 ++--
 .../src/components/ui/ButtonGroupBeta.stories.jsx             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
index 8f0b1026b9..6386ac0cca 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -9,7 +9,7 @@ export function ButtonGroupBeta({buttons = [], selectedName, onClick, hasTooltip
         <div className="flex">
             <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
                 {buttons.map(({label, name, Icon, dataTestId, ariaLabel}) => (
-                    <IconButton
+                    <ButtonGroupIconButton
                         key={`${name}-${label}`}
                         ariaLabel={ariaLabel}
                         dataTestId={dataTestId}
@@ -26,7 +26,7 @@ export function ButtonGroupBeta({buttons = [], selectedName, onClick, hasTooltip
     );
 }
 
-export function IconButton({dataTestId, onClick, label, ariaLabel, name, selectedName, Icon, hasTooltip}) {
+export function ButtonGroupIconButton({dataTestId, onClick, label, ariaLabel, name, selectedName, Icon, hasTooltip}) {
     const isActive = name === selectedName;
 
     const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
index 28209e6657..dd94b281a9 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.stories.jsx
@@ -2,12 +2,12 @@ import ImgFullIcon from '../../assets/icons/kg-img-full.svg?react';
 import ImgRegularIcon from '../../assets/icons/kg-img-regular.svg?react';
 import ImgWideIcon from '../../assets/icons/kg-img-wide.svg?react';
 import React from 'react';
-import {ButtonGroupBeta, IconButton} from './ButtonGroupBeta';
+import {ButtonGroupBeta, ButtonGroupIconButton} from './ButtonGroupBeta';
 
 const story = {
     title: 'Generic/Button group (beta)',
     component: ButtonGroupBeta,
-    subcomponents: {IconButton},
+    subcomponents: {ButtonGroupIconButton},
     parameters: {
         status: {
             type: 'functional'

From 44b0feb34d9b7273d39c4c7dbdb89de35990b924 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:22:55 +0000
Subject: [PATCH 35/41] added missing prop types to ButtonGroupBeta

---
 .../src/components/ui/ButtonGroupBeta.jsx              | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
index 6386ac0cca..72f3975c28 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -50,5 +50,13 @@ export function ButtonGroupIconButton({dataTestId, onClick, label, ariaLabel, na
 
 ButtonGroupBeta.propTypes = {
     selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive']),
-    hasTooltip: PropTypes.bool
+    hasTooltip: PropTypes.bool,
+    onClick: PropTypes.func,
+    buttons: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string,
+        name: PropTypes.string,
+        Icon: PropTypes.func,
+        dataTestId: PropTypes.string,
+        ariaLabel: PropTypes.string
+    }))
 };

From 467aee873e826d846673ff2e92d6f8bae6d98fa8 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:27:54 +0000
Subject: [PATCH 36/41] added default fn for `onRemoveMedia` prop to avoid
 errors if omitted

---
 packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
index 1a8460f52c..98f9c99d34 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
@@ -29,7 +29,7 @@ export function MediaUploaderBeta({
     openImageEditor,
     progress,
     errors,
-    onRemoveMedia,
+    onRemoveMedia = () => {},
     additionalActions,
     setFileInputRef
 }) {

From 993d118529ed961d25393459adb9111138092bf3 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 3 Mar 2025 11:47:48 +0100
Subject: [PATCH 37/41] Added a divider to call-to-action card settings panel

No ref
- Added a divider to separate the button settings from the other design settings
---
 .../koenig-lexical/src/components/ui/cards/CallToActionCard.jsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
index cdf226104d..e37c5897ec 100644
--- a/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
+++ b/packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
@@ -178,6 +178,7 @@ export function CallToActionCard({
                 onFileChange={onFileChange}
                 onRemoveMedia={onRemoveMedia}
             />
+            <hr className="not-kg-prose my-2 block border-t-grey-300 dark:border-t-grey-900" />
             {/* Button settings */}
             <ToggleSetting
                 dataTestId="button-settings"

From 253f99518682953d4a52773741e0be92c29472db Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:53:28 +0000
Subject: [PATCH 38/41] added isRequired to required props in ButtonGroupBeta

---
 packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
index 72f3975c28..760537e49f 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -49,9 +49,9 @@ export function ButtonGroupIconButton({dataTestId, onClick, label, ariaLabel, na
 }
 
 ButtonGroupBeta.propTypes = {
-    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive']),
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive']).isRequired,
     hasTooltip: PropTypes.bool,
-    onClick: PropTypes.func,
+    onClick: PropTypes.func.isRequired,
     buttons: PropTypes.arrayOf(PropTypes.shape({
         label: PropTypes.string,
         name: PropTypes.string,

From c18f8de28c80a28988e5c659b35a65a5f06dcbf1 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:54:05 +0000
Subject: [PATCH 39/41] fixed incorrect borderStyle conditionals in
 MediaUploaderBeta

---
 .../koenig-lexical/src/components/ui/MediaUploaderBeta.jsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
index 98f9c99d34..874523b2b4 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
@@ -78,11 +78,11 @@ export function MediaUploaderBeta({
     }
 
     return (
-        <div className={clsx('group/image relative flex items-center justify-center', borderStyle === 'dashed' && 'rounded', className)} data-testid="media-upload-filled">
+        <div className={clsx('group/image relative flex items-center justify-center', borderStyle === 'rounded' && 'rounded', className)} data-testid="media-upload-filled">
             {src && (
                 <>
                     <img alt={alt} className={clsx('mx-auto size-full rounded-lg', backgroundSize === 'cover' ? 'object-cover' : 'object-contain', imgClassName)} src={src} />
-                    <div className={clsx('absolute inset-0 rounded-lg bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover/image:opacity-100', borderStyle === 'dashed' && 'rounded-lg')}></div>
+                    <div className={clsx('absolute inset-0 rounded-lg bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover/image:opacity-100', borderStyle === 'rounded' && 'rounded-lg')}></div>
                 </>
             )}
 
@@ -119,7 +119,7 @@ MediaUploaderBeta.propTypes = {
     additionalActions: PropTypes.node,
     alt: PropTypes.string,
     backgroundSize: PropTypes.oneOf(['cover', 'contain']),
-    borderStyle: PropTypes.string,
+    borderStyle: PropTypes.oneOf(['squared', 'rounded']),
     className: PropTypes.string,
     desc: PropTypes.string,
     dragHandler: PropTypes.shape({isDraggedOver: PropTypes.bool, setRef: PropTypes.func}),

From 044dd2b2ec72afcbefa2cb773244b08060b6cebf Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 10:56:32 +0000
Subject: [PATCH 40/41] added missing openImageEditor prop type to
 MediaUploaderBeta

---
 packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
index 874523b2b4..4b25343776 100644
--- a/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/MediaUploaderBeta.jsx
@@ -132,6 +132,7 @@ MediaUploaderBeta.propTypes = {
     mimeTypes: PropTypes.arrayOf(PropTypes.string),
     onFileChange: PropTypes.func,
     onRemoveMedia: PropTypes.func,
+    openImageEditor: PropTypes.func,
     progress: PropTypes.number,
     setFileInputRef: PropTypes.func,
     size: PropTypes.string,

From 44e0a2989f47b566f331154d4724193fca8f26c2 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Mar 2025 11:21:15 +0000
Subject: [PATCH 41/41] added roles and aria-checked to ButtonGroupBeta
 elements

---
 .../koenig-lexical/src/components/ui/ButtonGroupBeta.jsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
index 760537e49f..d6361b8712 100644
--- a/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
+++ b/packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx
@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroupBeta({buttons = [], selectedName, onClick, hasTooltip = true}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
+            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white" role="menubar">
                 {buttons.map(({label, name, Icon, dataTestId, ariaLabel}) => (
                     <ButtonGroupIconButton
                         key={`${name}-${label}`}
@@ -34,9 +34,11 @@ export function ButtonGroupIconButton({dataTestId, onClick, label, ariaLabel, na
     return (
         <li className="mb-0">
             <button
+                aria-checked={isActive}
                 aria-label={ariaLabel || label}
                 className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
+                role="menuitemradio"
                 type="button"
                 onClick={handleClick}
                 onMouseDown={handleMousedown}
@@ -54,8 +56,8 @@ ButtonGroupBeta.propTypes = {
     onClick: PropTypes.func.isRequired,
     buttons: PropTypes.arrayOf(PropTypes.shape({
         label: PropTypes.string,
-        name: PropTypes.string,
-        Icon: PropTypes.func,
+        name: PropTypes.string.isRequired,
+        Icon: PropTypes.elementType,
         dataTestId: PropTypes.string,
         ariaLabel: PropTypes.string
     }))