diff --git a/src/core/components/Chips/Chips.stories.tsx b/src/core/components/Chips/Chips.stories.tsx
index c2d442e..1719a99 100644
--- a/src/core/components/Chips/Chips.stories.tsx
+++ b/src/core/components/Chips/Chips.stories.tsx
@@ -36,7 +36,12 @@ export const Default = () => {
return (
-
+
{
+const Chips = ({
+ className,
+ rootRef,
+ items,
+ onDelete,
+ ...props
+}: ChipsParams) => {
useEffect(() => {
if (!rootRef.current) return;
@@ -24,8 +30,9 @@ const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => {
element={'li'}
key={id}
label={label}
+ className={clsx('px-3')}
+ {...props}
onDelete={onDelete && (() => onDelete({ id }))}
- className={'whitespace-nowrap px-3'}
/>
))}
diff --git a/src/core/components/Chips/types/index.ts b/src/core/components/Chips/types/index.ts
index 7206527..9d9a42d 100644
--- a/src/core/components/Chips/types/index.ts
+++ b/src/core/components/Chips/types/index.ts
@@ -1,8 +1,19 @@
import { HTMLAttributes, RefObject } from 'react';
+import { ChipProps } from '@/core/components/Chip/types';
export interface ChipsParams
- extends Pick, 'className'> {
+ extends Pick, 'className'>,
+ Pick<
+ ChipProps<'li'>,
+ | 'size'
+ | 'colorTheme'
+ | 'rounded'
+ | 'theme'
+ | 'color'
+ | 'backgroundColor'
+ | 'borderColor'
+ > {
rootRef: RefObject;
- items: { id: string; label: string }[];
+ items: ({ id: string } & Pick, 'label' | 'icon'>)[];
onDelete?: (item: { id: string }) => void;
}