@chayns-components/core 5.5.2 → 5.5.3

package/lib/esm/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagFocusWrapper","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","useKeyboardFocusHighlighting","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","handleResetValue","shouldChangeColor","shouldShowKeyboardHighlighting","shouldShowTagHighlighting","blur","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","id","currentTags","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","preventDefault","prevValue","newTag","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","icons","onClick","stopPropagation","shouldShowInput","$shouldChangeColor","$shouldShowTagHighlighting","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagFocusWrapper,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport interface TagInputRef {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldEnableKeyboardHighlighting,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const shouldShowTagHighlighting =\n            shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleRemoveTag = useCallback(\n            (id: string, currentTags: Tag[]) => {\n                const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                if (removedTagIndex < 0) {\n                    setSelectedId(undefined);\n                    return;\n                }\n\n                setSelectedId(\n                    currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n                );\n            },\n            [onRemove],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLInputElement>) => {\n                const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n                const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n                const selectedTag =\n                    selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n                const isSpaceKey = event.key === ' ';\n                const isEnterKey = event.key === 'Enter';\n                const isDeleteKey = event.key === 'Delete';\n\n                if (currentValue === '' && visibleTags.length > 0) {\n                    if (event.key === 'ArrowLeft') {\n                        event.preventDefault();\n\n                        if (!selectedId) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        if (selectedTagIndex <= 0) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'ArrowRight') {\n                        event.preventDefault();\n\n                        if (!selectedId || selectedTagIndex < 0) {\n                            return;\n                        }\n\n                        if (selectedTagIndex >= visibleTags.length - 1) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'Home') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[0]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'End') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                        return;\n                    }\n\n                    if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {\n                        event.preventDefault();\n\n                        if (!selectedTag) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        handleRemoveTag(selectedTag.id, visibleTags);\n                        return;\n                    }\n                }\n\n                if (isEnterKey && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            const onAddResult = onAdd(newTag);\n\n                            if (typeof onAddResult === 'boolean' && !onAddResult) {\n                                return prevValue;\n                            }\n\n                            if (onAddResult instanceof Promise) {\n                                void onAddResult.then((shouldAddTag) => {\n                                    if (!shouldAddTag) {\n                                        return prevValue;\n                                    }\n\n                                    return '';\n                                });\n                            }\n                        }\n\n                        return '';\n                    });\n                }\n            },\n            [\n                currentValue,\n                onAdd,\n                handleRemoveTag,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n                tags,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n            },\n            [handleRemoveTag, shouldAllowMultiple, tags],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!tags) {\n                return items;\n            }\n\n            (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n                ({ text, id, rightElement }) => {\n                    const isSelected = id === selectedId;\n\n                    items.push(\n                        <StyledTagInputTagFocusWrapper\n                            $isSelected={isSelected}\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            key={`tag-input-${id}`}\n                        >\n                            <Badge\n                                backgroundColor={\n                                    isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n                                }\n                            >\n                                <StyledTagInputTagWrapper>\n                                    <StyledTagInputTagWrapperText>\n                                        {text}\n                                    </StyledTagInputTagWrapperText>\n                                    {rightElement}\n                                    <Icon\n                                        icons={['ts-wrong']}\n                                        shouldEnableKeyboardHighlighting={false}\n                                        onClick={(event) => {\n                                            event.preventDefault();\n                                            event.stopPropagation();\n\n                                            handleIconClick(id);\n                                        }}\n                                    />\n                                </StyledTagInputTagWrapper>\n                            </Badge>\n                        </StyledTagInputTagFocusWrapper>,\n                    );\n                },\n            );\n\n            return items;\n        }, [\n            tags,\n            shouldAllowMultiple,\n            selectedId,\n            shouldShowKeyboardHighlighting,\n            theme,\n            handleIconClick,\n        ]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n            [tags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    $shouldShowTagHighlighting={shouldShowTagHighlighting}\n                >\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                shouldShowKeyboardHighlighting,\n                shouldShowTagHighlighting,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","BadgeSize","InputSize","Icon","StyledTagInput","StyledTagInputTagFocusWrapper","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","useKeyboardFocusHighlighting","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","size","Medium","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","handleResetValue","shouldChangeColor","shouldShowKeyboardHighlighting","shouldShowTagHighlighting","blur","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","id","currentTags","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","preventDefault","prevValue","newTag","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","Small","SMALL","DEFAULT","$size","icons","onClick","stopPropagation","shouldShowInput","$shouldChangeColor","$shouldShowTagHighlighting","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport { BadgeSize } from '../badge/Badge.types';\nimport { InputSize } from '../input/Input';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagFocusWrapper,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n    /**\n     * The size of the input field.\n     */\n    size?: InputSize;\n};\n\nexport interface TagInputRef {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldEnableKeyboardHighlighting,\n            shouldPreventEnter,\n            size = InputSize.Medium,\n            tags,\n        },\n        ref,\n    ) => {\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const shouldShowTagHighlighting =\n            shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleRemoveTag = useCallback(\n            (id: string, currentTags: Tag[]) => {\n                const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                if (removedTagIndex < 0) {\n                    setSelectedId(undefined);\n                    return;\n                }\n\n                setSelectedId(\n                    currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n                );\n            },\n            [onRemove],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLInputElement>) => {\n                const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n                const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n                const selectedTag =\n                    selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n                const isSpaceKey = event.key === ' ';\n                const isEnterKey = event.key === 'Enter';\n                const isDeleteKey = event.key === 'Delete';\n\n                if (currentValue === '' && visibleTags.length > 0) {\n                    if (event.key === 'ArrowLeft') {\n                        event.preventDefault();\n\n                        if (!selectedId) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        if (selectedTagIndex <= 0) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'ArrowRight') {\n                        event.preventDefault();\n\n                        if (!selectedId || selectedTagIndex < 0) {\n                            return;\n                        }\n\n                        if (selectedTagIndex >= visibleTags.length - 1) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'Home') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[0]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'End') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                        return;\n                    }\n\n                    if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {\n                        event.preventDefault();\n\n                        if (!selectedTag) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        handleRemoveTag(selectedTag.id, visibleTags);\n                        return;\n                    }\n                }\n\n                if (isEnterKey && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            const onAddResult = onAdd(newTag);\n\n                            if (typeof onAddResult === 'boolean' && !onAddResult) {\n                                return prevValue;\n                            }\n\n                            if (onAddResult instanceof Promise) {\n                                void onAddResult.then((shouldAddTag) => {\n                                    if (!shouldAddTag) {\n                                        return prevValue;\n                                    }\n\n                                    return '';\n                                });\n                            }\n                        }\n\n                        return '';\n                    });\n                }\n            },\n            [\n                currentValue,\n                onAdd,\n                handleRemoveTag,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n                tags,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n            },\n            [handleRemoveTag, shouldAllowMultiple, tags],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!tags) {\n                return items;\n            }\n\n            (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n                ({ text, id, rightElement }) => {\n                    const isSelected = id === selectedId;\n\n                    items.push(\n                        <StyledTagInputTagFocusWrapper\n                            $isSelected={isSelected}\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            key={`tag-input-${id}`}\n                        >\n                            <Badge\n                                backgroundColor={\n                                    isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n                                }\n                                size={\n                                    size === InputSize.Small ? BadgeSize.SMALL : BadgeSize.DEFAULT\n                                }\n                            >\n                                <StyledTagInputTagWrapper $size={size}>\n                                    <StyledTagInputTagWrapperText $size={size}>\n                                        {text}\n                                    </StyledTagInputTagWrapperText>\n                                    {rightElement}\n                                    <Icon\n                                        icons={['ts-wrong']}\n                                        size={size === InputSize.Small ? 14 : 16}\n                                        shouldEnableKeyboardHighlighting={false}\n                                        onClick={(event) => {\n                                            event.preventDefault();\n                                            event.stopPropagation();\n\n                                            handleIconClick(id);\n                                        }}\n                                    />\n                                </StyledTagInputTagWrapper>\n                            </Badge>\n                        </StyledTagInputTagFocusWrapper>,\n                    );\n                },\n            );\n\n            return items;\n        }, [\n            tags,\n            shouldAllowMultiple,\n            selectedId,\n            shouldShowKeyboardHighlighting,\n            theme,\n            handleIconClick,\n            size,\n        ]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n            [tags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    $shouldShowTagHighlighting={shouldShowTagHighlighting}\n                    $size={size}\n                >\n                    {leftElement && (\n                        <StyledTagInputIconWrapper $size={size}>\n                            {leftElement}\n                        </StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            $size={size}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                shouldShowKeyboardHighlighting,\n                shouldShowTagHighlighting,\n                size,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.styles.js

@@ -3,10 +3,16 @@ import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighl
 export const StyledTagInput = styled.div`
     display: flex;
     flex-wrap: wrap;
-    min-height: 42px;
-    padding: 5px;
+    min-height: ${({
+  $size
+}) => $size === 'medium' ? '42px' : '32px'};
+    padding: ${({
+  $size
+}) => $size === 'medium' ? '5px' : '4px'};
     align-items: center;
-    gap: 6px;
+    gap: ${({
+  $size
+}) => $size === 'medium' ? '6px' : '4px'};
     background-color: ${({
   theme,
   $shouldChangeColor
@@ -26,7 +32,9 @@ export const StyledTagInput = styled.div`
 export const StyledTagInputTagWrapper = styled.div`
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: ${({
+  $size
+}) => $size === 'medium' ? '4px' : '2px'};
 `;
 export const StyledTagInputTagFocusWrapper = styled.div`
     display: inline-flex;
@@ -49,22 +57,31 @@ export const StyledTagInputTagWrapperText = styled.p`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 15px;
+    font-size: ${({
+  $size
+}) => $size === 'medium' ? '15px' : '13px'};
 `;
 export const StyledTagInputTagInput = styled.input`
     border: none;
-    height: 24px;
+    height: ${({
+  $size
+}) => $size === 'medium' ? '24px' : '20px'};
     flex-grow: 1;
     background-color: transparent;
     color: ${({
   theme
 }) => theme.text};
+    font-size: ${({
+  $size
+}) => $size === 'medium' ? '15px' : '13px'};
 `;
 export const StyledTagInputIconWrapper = styled.div`
     align-items: baseline;
     display: flex;
     flex: 0 0 auto;
     justify-content: center;
-    margin-left: 5px;
+    margin-left: ${({
+  $size
+}) => $size === 'medium' ? '5px' : '4px'};
 `;
 //# sourceMappingURL=TagInput.styles.js.map

package/lib/esm/components/tag-input/TagInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledTagInput","div","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTagInputProps = WithTheme<{\n    $shouldChangeColor: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n    $shouldShowTagHighlighting: boolean;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n    $isSelected: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: 42px;\n    padding: 5px;\n    align-items: center;\n    gap: 6px;\n    background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n\n    ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        !$shouldShowTagHighlighting &&\n        css`\n            &:focus-within {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 4px;\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n    display: inline-flex;\n\n    ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n        $isSelected &&\n        $shouldShowKeyboardHighlighting &&\n        css`\n            ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n                border-radius: 999px;\n                outline-offset: 0;\n            }\n        `}\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: 24px;\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n\nexport const StyledTagInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAa/F,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,MAAM,CAAC;EAAEG,+BAA+B;EAAEC;AAA2B,CAAC,KAC9DD,+BAA+B,IAC/B,CAACC,0BAA0B,IAC3BR,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMQ,wBAAwB,GAAGV,MAAM,CAACI,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGX,MAAM,CAACI,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAEQ,WAAW;EAAEJ;AAAgC,CAAC,KAC/CI,WAAW,IACXJ,+BAA+B,IAC/BP,GAAG;AACX,cAAcE,cAAc;AAC5B;AACA,kBAAkBD,gCAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,4BAA4B,GAAGb,MAAM,CAACc,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGf,MAAM,CAACgB,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEX;AAAmC,CAAC,KAAKA,KAAK,CAACY,IAAI;AACnE,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGlB,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TagInput.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledTagInput","div","$size","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { InputSize } from '../input/Input';\n\ntype StyledTagInputProps = WithTheme<{\n    $shouldChangeColor: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n    $shouldShowTagHighlighting: boolean;\n    $size: InputSize;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n    $isSelected: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n    padding: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n    align-items: center;\n    gap: ${({ $size }) => ($size === 'medium' ? '6px' : '4px')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n\n    ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        !$shouldShowTagHighlighting &&\n        css`\n            &:focus-within {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledTagInputTagWrapperProps = {\n    $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapper = styled.div<StyledTagInputTagWrapperProps>`\n    display: flex;\n    align-items: center;\n    gap: ${({ $size }) => ($size === 'medium' ? '4px' : '2px')};\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n    display: inline-flex;\n\n    ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n        $isSelected &&\n        $shouldShowKeyboardHighlighting &&\n        css`\n            ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n                border-radius: 999px;\n                outline-offset: 0;\n            }\n        `}\n`;\n\ntype StyledTagInputTagWrapperTextProps = {\n    $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapperText = styled.p<StyledTagInputTagWrapperTextProps>`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<{\n    $size: InputSize;\n}>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: ${({ $size }) => ($size === 'medium' ? '24px' : '20px')};\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n    font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputIconWrapperProps = {\n    $size: InputSize;\n};\n\nexport const StyledTagInputIconWrapper = styled.div<StyledTagInputIconWrapperProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAe/F,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACvE,eAAe,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAClE;AACA,WAAW,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,MAAM,CAAC;EAAEG,+BAA+B;EAAEC;AAA2B,CAAC,KAC9DD,+BAA+B,IAC/B,CAACC,0BAA0B,IAC3BT,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMS,wBAAwB,GAAGX,MAAM,CAACI,GAAkC;AACjF;AACA;AACA,WAAW,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGZ,MAAM,CAACI,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAES,WAAW;EAAEJ;AAAgC,CAAC,KAC/CI,WAAW,IACXJ,+BAA+B,IAC/BR,GAAG;AACX,cAAcE,cAAc;AAC5B;AACA,kBAAkBD,gCAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMY,4BAA4B,GAAGd,MAAM,CAACe,CAAoC;AACvF;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEV;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMW,sBAAsB,GAAGhB,MAAM,CAACiB,KAAkC;AAC/E;AACA,cAAc,CAAC;EAAEZ;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACY,IAAI;AACnE,iBAAiB,CAAC;EAAEb;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMc,yBAAyB,GAAGnB,MAAM,CAACI,GAAmC;AACnF;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AACtE,CAAC","ignoreList":[]}

package/lib/types/components/search-box/SearchBox.d.ts

@@ -9,6 +9,7 @@ export interface SearchBoxRef {
 export interface TagInputSettings {
     onAdd?: TagInputProps['onAdd'];
     onRemove?: TagInputProps['onRemove'];
+    size?: TagInputProps['size'];
     shouldAllowMultiple?: TagInputProps['shouldAllowMultiple'];
     tags?: TagInputProps['tags'];
 }

package/lib/types/components/tag-input/TagInput.d.ts

@@ -1,5 +1,6 @@
 import React, { ChangeEventHandler, ReactNode, FocusEventHandler } from 'react';
 import type { Tag } from '../../types/tagInput';
+import { InputSize } from '../input/Input';
 export type TagInputProps = {
     /**
      * An element that should be displayed on the left side of the input.
@@ -45,6 +46,10 @@ export type TagInputProps = {
      * The tags that should be displayed.
      */
     tags?: Tag[];
+    /**
+     * The size of the input field.
+     */
+    size?: InputSize;
 };
 export interface TagInputRef {
     blur: () => void;

package/lib/types/components/tag-input/TagInput.styles.d.ts

@@ -1,27 +1,43 @@
+import type { InputSize } from '../input/Input';
 type StyledTagInputTagFocusWrapperProps = {
     $isSelected: boolean;
     $shouldShowKeyboardHighlighting: boolean;
 };
-export declare const StyledTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
+export declare const StyledTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$size" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
     $shouldChangeColor: boolean;
     $shouldShowKeyboardHighlighting: boolean;
     $shouldShowTagHighlighting: boolean;
+    $size: InputSize;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$size" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
     $shouldChangeColor: boolean;
     $shouldShowKeyboardHighlighting: boolean;
     $shouldShowTagHighlighting: boolean;
+    $size: InputSize;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
-export declare const StyledTagInputTagWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+type StyledTagInputTagWrapperProps = {
+    $size: InputSize;
+};
+export declare const StyledTagInputTagWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledTagInputTagWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledTagInputTagWrapperProps, never>>> & string;
 export declare const StyledTagInputTagFocusWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledTagInputTagFocusWrapperProps> & StyledTagInputTagFocusWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledTagInputTagFocusWrapperProps> & StyledTagInputTagFocusWrapperProps, never>>> & string;
-export declare const StyledTagInputTagWrapperText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
-export declare const StyledTagInputTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme"> & {
+type StyledTagInputTagWrapperTextProps = {
+    $size: InputSize;
+};
+export declare const StyledTagInputTagWrapperText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "$size"> & StyledTagInputTagWrapperTextProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "$size"> & StyledTagInputTagWrapperTextProps, never>>> & string;
+export declare const StyledTagInputTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$size"> & {
+    $size: InputSize;
+} & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$size"> & {
+    $size: InputSize;
+} & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
-export declare const StyledTagInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+type StyledTagInputIconWrapperProps = {
+    $size: InputSize;
+};
+export declare const StyledTagInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledTagInputIconWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$size"> & StyledTagInputIconWrapperProps, never>>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.5.2",
+    "version": "5.5.3",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1e8c043d87d4c2997363937a1720ce1c20fba501"
+    "gitHead": "16c44ca8e9d7e381cad35baa24ef91c22db2e49f"
 }