function App() {
  const [colors, setColors] = useState(["#bf4040","#ab3f3f","#9f3737","#8d3434","#812929"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors} onChange={(c) => setColors(c)} disableAlpha/>
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["#011f4b","#03396c","#005b96","#6497b1","#b3cde0"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors} onChange={(c) => setColors(c)} animationLength={.5} animationOffset = {.5} loadFromLeft flipAddButton />
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["hsl(10,20%,50%)","hsl(50,10%,60%)","hsl(100,28%,21%)","hsl(312,60%,10%)"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors} onChange={(c) => setColors(c)} colorFormat = "hsl" defaultColor = "hsla(216,91%,56%,.8)"/>
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["#ee4035", "#fdf498", "#7bc043","#0392cf"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors}  maxColors = {4} minColors = {4} 
		onChange={(c, e) => {
			setColors(c)
			sendNotification(e)
		}} 
		onMaxColorsReached={(c) => sendError(`Max colors reached: ${c}`)} 
		onMinColorsReached={(c) => sendError(`Min colors reached: ${c}`)}
		/>
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["#9381FF", "#B8B8FF", "#DCD3EE", "#EED6D6", "#FFD8BE"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors}  onChange={(c) => setColors(c)} 
		swatchLabelProps = {{
			style:{fontSize:"2rem"}
		}}
		addButtonProps= {{
			style:{backgroundColor:"orange"}
		}}
		containerProps = {{
			style:{backgroundColor:"red", padding:"1rem", borderRadius:".5rem"}
		}}
		popoverProps = {{
			elevation:23,  
			anchorOrigin:{ vertical: 'bottom', horizontal: 'center' },
			transformOrigin:{ vertical: 'top', horizontal: 'center' },
			PaperProps:{ 
				style: {border:"red solid 2px", backgroundColor:"pink"}
			},
			transitionDuration:1000
		}}
		/>
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["rgb(191,64,64)","rgb(171,63,63)","rgb(159,55,55)","rgb(141,52,52)"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors} colorFormat = "rgb"  onChange={(c) => setColors(c)} 
		swatchLabelColor={(c)=>{
			//c is the color of the swatch 
			return "#"+Math.floor(Math.random()*16777215).toString(16)
		}}
		swatchActiveBorderColor={(c)=>{
			//c is the color of the swatch 
			return "#"+Math.floor(Math.random()*16777215).toString(16)
		}}
		/>
      </div>
  );
}

function App() {
  const [colors, setColors] = useState(["#a8e6cf", "#dcedc1", "#ffd3b6", "#ffaaa5", "#ff8b94"])
  return (
      <div style={{ width: "2rem", padding: "2rem" }}>
		<ColorList colors = {colors}  onChange={(c) => setColors(c)} 
		AddButton={({addColor})=>{
			//c is the color of the swatch 
			return <button onClick = {()=>addColor()}>Fancy Add Button</button>
		}}
		RemoveButton={({removeColor})=>{
			//c is the color of the swatch 
			return <button onClick = {()=>removeColor()}>Fancy Remove Button</button>
		}}
		SaveButton={({saveColor})=>{
			//c is the color of the swatch 
			return <button onClick = {()=>saveColor()}>Fancy Save Button</button>
		}}
		/>
      </div>
  );
}