diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index dc2f55418..05031720a 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 29 Jul 2024 05:11:07 GMT
+// Generated on Tue, 30 Jul 2024 09:07:12 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/ui/color-picker/src/color-picker.tsx b/packages/ui/color-picker/src/color-picker.tsx
index aabd738d3..8a7b3ae90 100644
--- a/packages/ui/color-picker/src/color-picker.tsx
+++ b/packages/ui/color-picker/src/color-picker.tsx
@@ -5,8 +5,6 @@ import { ColorPickerProps } from "./color-picker.types"
 import { Button } from "@wpmudev/sui-button"
 import { Input } from "@wpmudev/sui-input"
 
-const PreviewImage = require("./static/opaque.png")
-
 import Picker from "./elements/picker"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { useOuterClick, useStyles } from "@wpmudev/sui-hooks"
@@ -168,7 +166,9 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
 						style={
 							tempColor
 								? { backgroundColor: tempColor }
-								: { backgroundImage: `url(${PreviewImage})` }
+								: {
+										backgroundImage: `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAK0lEQVQ4y2P8//8/A25w7949PLJMDBSAUc0jQzML/jSkpKQ0GmCjminRDADJNQjBr5nbigAAAABJRU5ErkJggg==')`,
+								  }
 						}
 					/>
 				</div>
diff --git a/packages/ui/color-picker/src/static/opaque.png b/packages/ui/color-picker/src/static/opaque.png
deleted file mode 100644
index 8ede4f053..000000000
Binary files a/packages/ui/color-picker/src/static/opaque.png and /dev/null differ