From 12b364e34e8dcd1da18dc1b3e0ac34f3b07e3f32 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 5 May 2026 11:25:22 +0530
Subject: [PATCH] fix: filterchip styles

---
 packages/raystack/components/filter-chip/filter-chip.tsx | 4 ++--
 packages/raystack/components/input/input.tsx             | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/raystack/components/filter-chip/filter-chip.tsx b/packages/raystack/components/filter-chip/filter-chip.tsx
index 25c8d17af..170a8f3a7 100644
--- a/packages/raystack/components/filter-chip/filter-chip.tsx
+++ b/packages/raystack/components/filter-chip/filter-chip.tsx
@@ -139,7 +139,7 @@ export const FilterChip = ({
               value={filterValue}
               onSelect={date => handleFilterValueChange(date)}
               showCalendarIcon={false}
-              inputProps={{ className: styles.dateField }}
+              inputProps={{ classNames: { container: styles.dateField } }}
             />
           </div>
         );
@@ -148,7 +148,7 @@ export const FilterChip = ({
           <div className={styles.inputFieldWrapper}>
             <Input
               variant={variant === 'text' ? 'borderless' : 'default'}
-              className={styles.inputField}
+              classNames={{ container: styles.inputField }}
               value={filterValue}
               onChange={e => handleFilterValueChange(e.target.value)}
             />
diff --git a/packages/raystack/components/input/input.tsx b/packages/raystack/components/input/input.tsx
index edccca5b7..d5b7c5b8c 100644
--- a/packages/raystack/components/input/input.tsx
+++ b/packages/raystack/components/input/input.tsx
@@ -35,6 +35,7 @@ export interface InputProps
   maxChipsVisible?: number;
   variant?: 'default' | 'borderless';
   containerRef?: RefObject<HTMLDivElement | null>;
+  classNames?: { container?: string };
 }
 
 export function Input({
@@ -51,6 +52,7 @@ export function Input({
   size,
   variant = 'default',
   containerRef,
+  classNames,
   required,
   ...props
 }: InputProps) {
@@ -61,7 +63,8 @@ export function Input({
     <div
       className={cx(
         inputWrapper({ size, variant }),
-        chips?.length && styles['has-chips']
+        chips?.length && styles['has-chips'],
+        classNames?.container
       )}
       data-disabled={disabled || undefined}
       style={{ width: width || '100%' }}