@chayns-components/core 5.0.0-beta.4 → 5.0.0-beta.400

package/lib/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","fontSize","initial","layout","style","transition","duration","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput\n                className=\"beta-chayns-input\"\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n            >\n                {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                <StyledInputContent>\n                    <StyledInputField\n                        disabled={isDisabled}\n                        onBlur={onBlur}\n                        onChange={handleInputFieldChange}\n                        onFocus={onFocus}\n                        onKeyDown={onKeyDown}\n                        ref={inputRef}\n                        type={type}\n                        value={value}\n                        autoFocus={shouldUseAutoFocus}\n                        inputMode={inputMode}\n                        isInvalid={isInvalid}\n                    />\n                    <StyledMotionInputLabel\n                        animate={{\n                            fontSize: hasValue ? '10px' : '16px',\n                        }}\n                        initial={false}\n                        layout\n                        style={{ ...labelPosition }}\n                        transition={{ type: 'tween', duration: 0.3 }}\n                        isInvalid={isInvalid}\n                    >\n                        {placeholderElement}\n                        {placeholder}\n                    </StyledMotionInputLabel>\n                </StyledInputContent>\n                {shouldShowClearIcon && (\n                    <StyledMotionInputClearIcon\n                        animate={{ opacity: hasValue ? 1 : 0 }}\n                        initial={false}\n                        onClick={handleClearIconClick}\n                        transition={{ type: 'tween' }}\n                        isInvalid={isInvalid}\n                    >\n                        <Icon icons={['fa fa-times']} color={isInvalid ? theme.wrong : undefined} />\n                    </StyledMotionInputClearIcon>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/components/input/Input.styles.d.ts

@@ -0,0 +1,541 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { InputProps } from './Input';
+type StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;
+export declare const StyledInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputProps>>;
+export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;
+export declare const StyledInputField: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputFieldProps>>;
+type StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;
+export declare const StyledMotionInputLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    form?: string | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLLabelElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLLabelElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLLabelElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    htmlFor?: string | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLabelElement>, StyledMotionInputLabelProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, keyof import("react").Component<any, {}, any>>;
+type StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;
+export declare const StyledMotionInputClearIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionInputClearIconProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledInputIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export {};