From b392d22e8139d43ec348f1aa2289495b7d5bd672 Mon Sep 17 00:00:00 2001
From: Almog Adziashvili <almoga@wix.com>
Date: Thu, 18 Jan 2024 17:50:55 +0200
Subject: [PATCH 1/2] colors-chagnes #draftpr

---
 src/stories/colors.mdx | 285 +++++++++++++++++++++--------------------
 1 file changed, 143 insertions(+), 142 deletions(-)

diff --git a/src/stories/colors.mdx b/src/stories/colors.mdx
index 47df2d4..72b0357 100644
--- a/src/stories/colors.mdx
+++ b/src/stories/colors.mdx
@@ -6,10 +6,11 @@ import { Meta, Story } from '@storybook/blocks';
   {`
   .container {
     display: grid;
-    grid-template-columns: repeat(21, 50px);
-    grid-template-rows: repeat(8, 50px);
+    grid-template-columns: repeat(8, 50px);
+    grid-template-rows: repeat(21, 40px);
     color: var(--fui-color-foreground-default);
     grid-gap: 2px;
+    justify-content: center;
   }
   .color-title {
     font-weight: 300;
@@ -36,171 +37,171 @@ import { Meta, Story } from '@storybook/blocks';
 
 <div data-theme='dark' className='container'>
   <div className='color-title'></div>
-  <div className='color-title'>50</div>
-  <div className='color-title'>100</div>
-  <div className='color-title'>150</div>
-  <div className='color-title'>200</div>
-  <div className='color-title'>250</div>
-  <div className='color-title'>300</div>
-  <div className='color-title'>350</div>
-  <div className='color-title'>400</div>
-  <div className='color-title'>450</div>
-  <div className='color-title'>500</div>
-  <div className='color-title'>550</div>
-  <div className='color-title'>600</div>
-  <div className='color-title'>650</div>
-  <div className='color-title'>700</div>
-  <div className='color-title'>750</div>
-  <div className='color-title'>800</div>
-  <div className='color-title'>850</div>
-  <div className='color-title'>900</div>
-  <div className='color-title'>950</div>
-  <div className='color-title'>1000</div>
   <div className='color-title'>Neutral</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box' style={{ backgroundColor: 'var(--fui-color-neutral-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-1000)' }}></div>
   <div className='color-title'>Blue</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-1000)' }}></div>
   <div className='color-title'>Purple</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-1000)' }}></div>
   <div className='color-title'>Yellow</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-1000)' }}></div>
   <div className='color-title'>Brown</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-1000)' }}></div>
   <div className='color-title'>Green</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-1000)' }}></div>
   <div className='color-title'>Red</div>
+  <div className='color-title'>50</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box' style={{ backgroundColor: 'var(--fui-color-neutral-50)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-50)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-50)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-50)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-50)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-50)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-50)' }}></div>
+  <div className='color-title'>100</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-100)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-100)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-100)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-100)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-100)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-100)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-100)' }}></div>
+  <div className='color-title'>150</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-150)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-150)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-150)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-150)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-150)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-150)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-150)' }}></div>
+  <div className='color-title'>200</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-200)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-200)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-200)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-200)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-200)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-200)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-200)' }}></div>
+  <div className='color-title'>250</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-250)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-250)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-250)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-250)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-250)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-250)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-250)' }}></div>
+  <div className='color-title'>300</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-300)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-300)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-300)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-300)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-300)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-300)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-300)' }}></div>
+  <div className='color-title'>350</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-350)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-350)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-350)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-350)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-350)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-350)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-350)' }}></div>
+  <div className='color-title'>400</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-400)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-400)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-400)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-400)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-400)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-400)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-400)' }}></div>
+  <div className='color-title'>450</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-450)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-450)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-450)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-450)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-450)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-450)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-450)' }}></div>
+  <div className='color-title'>500</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-500)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-500)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-500)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-500)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-500)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-500)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-500)' }}></div>
+  <div className='color-title'>550</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-550)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-550)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-550)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-550)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-550)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-550)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-550)' }}></div>
+  <div className='color-title'>600</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-600)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-600)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-600)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-600)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-600)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-600)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-600)' }}></div>
+  <div className='color-title'>650</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-650)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-650)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-650)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-650)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-650)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-650)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-650)' }}></div>
+  <div className='color-title'>700</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-700)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-700)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-700)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-700)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-700)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-700)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-700)' }}></div>
+  <div className='color-title'>750</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-750)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-750)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-750)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-750)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-750)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-750)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-750)' }}></div>
+  <div className='color-title'>800</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-800)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-800)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-800)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-800)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-800)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-800)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-800)' }}></div>
+  <div className='color-title'>850</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-850)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-850)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-850)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-850)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-850)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-850)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-850)' }}></div>
+  <div className='color-title'>900</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-900)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-900)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-900)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-900)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-900)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-900)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-900)' }}></div>
+  <div className='color-title'>950</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-950)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-950)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-950)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-950)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-950)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-950)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-950)' }}></div>
+  <div className='color-title'>1000</div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-1000)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-1000)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-1000)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-1000)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-1000)' }}></div>
+  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-1000)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-1000)' }}></div>
 </div>
\ No newline at end of file

From 94cf6cfc97716c99a762947eb431aa7a2561d6f6 Mon Sep 17 00:00:00 2001
From: Almog Adziashvili <almoga@wix.com>
Date: Fri, 19 Jan 2024 14:41:43 +0200
Subject: [PATCH 2/2] added empty color box desiign

---
 .storybook/YourTheme.js |   1 -
 src/stories/colors.mdx  | 178 +++++++++++++++++++++-------------------
 2 files changed, 94 insertions(+), 85 deletions(-)

diff --git a/.storybook/YourTheme.js b/.storybook/YourTheme.js
index 4ed7fe0..6ff7b92 100644
--- a/.storybook/YourTheme.js
+++ b/.storybook/YourTheme.js
@@ -23,7 +23,6 @@ export default create({
   barSelectedColor: "rgba(53, 84, 206, 0.1)",
   barBg: "#F0F4FF",
   buttonBg: "#2856E0",
-  buttonBg: "#2856E0",
   booleanBg: "#F0F4FF",
   booleanSelectedBg: "#2856E0",
   inputBg: "#F5F6F9",
diff --git a/src/stories/colors.mdx b/src/stories/colors.mdx
index 72b0357..0df7012 100644
--- a/src/stories/colors.mdx
+++ b/src/stories/colors.mdx
@@ -6,15 +6,15 @@ import { Meta, Story } from '@storybook/blocks';
   {`
   .container {
     display: grid;
-    grid-template-columns: repeat(8, 50px);
-    grid-template-rows: repeat(21, 40px);
+    grid-template-columns: 36px repeat(7, 60px);
+    grid-template-rows: repeat(21, 36px);
     color: var(--fui-color-foreground-default);
-    grid-gap: 2px;
+    grid-gap: 3px;
     justify-content: center;
   }
   .color-title {
     font-weight: 300;
-    font-size: 11px;
+    font-size: 13px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,6 +24,7 @@ import { Meta, Story } from '@storybook/blocks';
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 2px;
   }
   .color-box:hover .color-copy {
     display: block;
@@ -32,6 +33,15 @@ import { Meta, Story } from '@storybook/blocks';
     display: none;
     color: black;
   }
+  .empty-box {
+    border: 1px dashed var(--fui-color-divider-soft);
+    border-radius: 2px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fui-color-divider-soft);
+  }
   `}
 </style>
 
@@ -49,7 +59,7 @@ import { Meta, Story } from '@storybook/blocks';
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-50)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-50)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-50)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-50)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-50)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-50)' }}></div>
   <div className='color-title'>100</div>
@@ -57,118 +67,118 @@ import { Meta, Story } from '@storybook/blocks';
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-100)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-100)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-100)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-100)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-100)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-100)' }}></div>
   <div className='color-title'>150</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-150)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-150)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>200</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-200)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-200)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-200)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-200)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-200)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-200)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-200)' }}></div>
   <div className='color-title'>250</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-250)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-250)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>300</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-300)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-300)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-300)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-300)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-300)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-300)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-300)' }}></div>
   <div className='color-title'>350</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-350)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-350)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>400</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-400)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-400)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>450</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-450)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-450)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>500</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-500)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-500)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>550</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-550)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-550)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-550)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>600</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-600)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-600)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-600)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>650</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-650)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-650)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-650)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-650)' }}></div>
   <div className='color-title'>700</div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-700)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-700)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-700)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-700)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-700)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div className='color-title'>750</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-750)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-750)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-750)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-750)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-750)' }}></div>
   <div className='color-title'>800</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-800)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-800)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-800)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-800)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-800)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-800)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-800)' }}></div>
@@ -176,15 +186,15 @@ import { Meta, Story } from '@storybook/blocks';
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-850)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-850)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-850)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-850)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-850)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-850)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-850)' }}></div>
   <div className='color-title'>900</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-900)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-900)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-900)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-900)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-900)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-900)' }}></div>
@@ -192,16 +202,16 @@ import { Meta, Story } from '@storybook/blocks';
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-950)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-950)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-950)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-950)' }}></div>
+  <div className='empty-box'>Free Slot</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-950)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-950)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-950)' }}></div>
   <div className='color-title'>1000</div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-neutral-1000)' }}></div>
   <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-blue-1000)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-purple-1000)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-yellow-1000)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-brown-1000)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-green-1000)' }}></div>
-  <div onClick={(e) => navigator.clipboard.writeText(e.target.className.includes('color-box') ? e.target.style.backgroundColor : e.target.parentElement.style.backgroundColor)} className='color-box'style={{ backgroundColor: 'var(--fui-color-red-1000)' }}></div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
+  <div className='empty-box'>Free Slot</div>
 </div>
\ No newline at end of file