From c72ea0e577a4e585beb00c5b3b79d776b64a1d98 Mon Sep 17 00:00:00 2001
From: Omar K <kzrooey@gmail.com>
Date: Fri, 11 Jul 2025 09:11:03 -0500
Subject: [PATCH 1/2] pass addonBefore and addonAfter props to react-compact

---
 packages/color-compact/src/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/color-compact/src/index.tsx b/packages/color-compact/src/index.tsx
index eaa12206e..dd0fb5720 100644
--- a/packages/color-compact/src/index.tsx
+++ b/packages/color-compact/src/index.tsx
@@ -19,6 +19,8 @@ export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElemen
   onChange?: (color: ColorResult, evn?: T) => void;
   rectRender?: (props: SwatchRectRenderProps) => JSX.Element | undefined;
   rectProps?: SwatchProps['rectProps'];
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 
 const COLORS = [
@@ -84,6 +86,8 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
     colors = COLORS,
     rectProps,
     rectRender,
+    addonBefore,
+    addonAfter,
     ...other
   } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color) as HsvaColor;
@@ -128,6 +132,8 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
           },
         }}
         onChange={(hsvColor) => handleChangeCallback(hsvColor)}
+        addonBefore={addonBefore}
+        addonAfter={addonAfter}
       />
       <div style={{ display: 'flex', margin: '0 4px 3px 0' }}>
         <EditableInput

From 1f3933628d42623a4d828918256dd45c92f40acc Mon Sep 17 00:00:00 2001
From: Omar K <kzrooey@gmail.com>
Date: Fri, 11 Jul 2025 09:34:31 -0500
Subject: [PATCH 2/2] react-color-compact: add className for editable input

---
 packages/color-compact/src/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/color-compact/src/index.tsx b/packages/color-compact/src/index.tsx
index dd0fb5720..6689c31bc 100644
--- a/packages/color-compact/src/index.tsx
+++ b/packages/color-compact/src/index.tsx
@@ -135,7 +135,10 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
         addonBefore={addonBefore}
         addonAfter={addonAfter}
       />
-      <div style={{ display: 'flex', margin: '0 4px 3px 0' }}>
+      <div
+        className={[`${prefixCls}-input-wrapper`, className || ''].filter(Boolean).join(' ')}
+        style={{ display: 'flex', margin: '0 4px 3px 0' }}
+      >
         <EditableInput
           onChange={(evn, val) => handleHex(val, evn)}
           labelStyle={{ paddingRight: 5, marginTop: -1 }}