@chayns-components/core 5.0.9 → 5.0.10

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

@@ -30,6 +30,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   onKeyDown,
   onPaste,
   placeholder,
+  placeholderColor,
   rightElement,
   shouldShowOnlyBottomBorder,
   shouldRemainPlaceholder = false,
@@ -170,6 +171,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
+    $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -185,7 +187,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderColor, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
       item: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: 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 content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an 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\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\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        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\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                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={color}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                autoComplete,\n                backgroundColor,\n                color,\n                handleClearIconClick,\n                handleInputFieldChange,\n                hasValue,\n                id,\n                inputMode,\n                isDisabled,\n                isInvalid,\n                labelPosition,\n                leftElement,\n                onBlur,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                placeholder,\n                placeholderWidth,\n                rightElement,\n                shouldPreventPlaceholderAnimation,\n                shouldRemainPlaceholder,\n                shouldShowBorder,\n                shouldShowCenteredContent,\n                shouldShowClearIcon,\n                shouldShowOnlyBottomBorder,\n                shouldShowTransparentBackground,\n                shouldUseAutoFocus,\n                size,\n                theme.fontSize,\n                theme.wrong,\n                type,\n                value,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAkBA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAWA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAAyC,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAiC7BgB,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAwGrB,MAAME,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CACI;EACIC,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAGlB,SAAS,CAACmB,MAAM;EACvBC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC,iCAAiC,GAAG,KAAK;EACzCC,EAAE;EACFC,+BAA+B,GAAG,KAAK;EACvCC;AACJ,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOZ,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACa,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAErD,IAAAE,wBAAgB,EAACH,QAAQ,CAAC;EAE1B,MAAMI,eAAe,GAAG,IAAAC,uBAAc,EAACH,cAAc,CAAC;EAEtD,IAAAI,gBAAS,EAAC,MAAM;IACZ,IAAIF,eAAe,IAAI/B,0BAA0B,EAAE;MAC/CqB,mBAAmB,CAACU,eAAe,CAACG,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACH,eAAe,EAAE/B,0BAA0B,CAAC,CAAC;EAEjD,MAAMmC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIT,QAAQ,CAACU,OAAO,EAAE;MAClBV,QAAQ,CAACU,OAAO,CAAC9B,KAAK,GAAG,EAAE;MAE3BW,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOxB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE4C,MAAM,EAAEX,QAAQ,CAACU;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC3C,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAM6C,gBAAgB,GAAG,CAAAxC,YAAY,aAAZA,YAAY,gBAAAiB,mBAAA,GAAZjB,YAAY,CAAEyC,KAAK,cAAAxB,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqByB,KAAK,cAAAzB,mBAAA,uBAA1BA,mBAAA,CAA4B0B,eAAe,MAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG,IAAAR,kBAAW,EACrCS,KAAoC,IAAK;IACtC3B,WAAW,CAAC2B,KAAK,CAACP,MAAM,CAAC/B,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmD,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACnD,QAAQ,CACb,CAAC;EAED,IAAAoD,0BAAmB,EACf/B,GAAG,EACH,OAAO;IACHgC,KAAK,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMrB,QAAQ,CAACU,OAAO,cAAAW,iBAAA,uBAAhBA,iBAAA,CAAkBD,KAAK,CAAC,CAAC;IAAA;IACtCE,IAAI,EAAEA,CAAA;MAAA,IAAAC,kBAAA;MAAA,QAAAA,kBAAA,GAAMvB,QAAQ,CAACU,OAAO,cAAAa,kBAAA,uBAAhBA,kBAAA,CAAkBD,IAAI,CAAC,CAAC;IAAA;EACxC,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAhB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO1B,KAAK,KAAK,QAAQ,EAAE;MAC3BW,WAAW,CAACX,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAImC,eAA6D;EACjE,IAAIS,KAAyC;EAE7C,IAAItC,+BAA+B,EAAE;IACjC6B,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACHpB,YAAY,CAAC8B,eAAe,IAC5B,CAACC,4BAAe,CAACC,KAAK,EAAED,4BAAe,CAACE,OAAO,EAAEF,4BAAe,CAACG,OAAO,CAAC,CAACC,QAAQ,CAC9EnC,YAAY,CAAC8B,eACjB,CAAC,EACH;IACEV,eAAe,GAAG,OAAO;IACzBS,KAAK,GAAG,MAAM;EAClB,CAAC,MAAM,IAAI7B,YAAY,CAACoC,iBAAiB,EAAE;IACvChB,eAAe,GAAGjB,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAMkC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAI3C,QAAQ,IAAI,CAAChB,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAE6D,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE3D,IAAI,KAAKlB,SAAS,CAAC8E,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;QAAEH,KAAK,EAAE,CAAC;MAAE,CAAC;IACpE;IAEA,OAAO;MAAEI,IAAI,EAAE,CAAC;IAAE,CAAC;EACvB,CAAC,EAAE,CACChD,QAAQ,EACRN,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAM8D,YAAY,GAAG,IAAAN,cAAO,EACxB,mBACIzG,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAyG,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE9E;EAAW,gBAC/DrC,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAA4G,yBAAyB;IACtBC,gCAAgC,EAAE3D,+BAAgC;IAClE4D,gBAAgB,EAAE/B,eAAgB;IAClCgC,UAAU,EAAEhE,SAAU;IACtBiE,wBAAwB,EAAEpC,gBAAiB;IAC3CqC,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE;EAAK,GAEXd,WAAW,iBACRnC,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAmH,sBAAsB,QAAExF,WAAoC,CAChE,eACDnC,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAoH,kBAAkB;IACfH,2BAA2B,EAAE5E;EAA2B,gBAExD7C,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAqH,gBAAgB;IACbC,MAAM,EAAE9B,KAAM;IACd+B,iBAAiB,EAAE9D,gBAAiB;IACpCR,EAAE,EAAEA,EAAG;IACPuE,QAAQ,EAAE3F,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkD,sBAAuB;IACjCjD,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBwF,OAAO,EAAGvC,KAAK,IAAK;MAChBA,KAAK,CAACwC,cAAc,CAAC,CAAC;MACtBxC,KAAK,CAACyC,eAAe,CAAC,CAAC;IAC3B,CAAE;IACFzF,OAAO,EAAEA,OAAQ;IACjBkB,GAAG,EAAEY,QAAS;IACdrB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbgF,SAAS,EAAE9E,kBAAmB;IAC9BlB,SAAS,EAAEA,SAAU;IACrBuB,YAAY,EAAEA,YAAa;IAC3B4D,UAAU,EAAEhE,SAAU;IACtB8E,0BAA0B,EAAErF;EAA0B,CACzD,CAAC,eACFhD,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAA8H,6BAA6B;IAC1BC,OAAO,EACH/E,iCAAiC,GAC3B;MACIgF,OAAO,EAAE1E,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACI2E,QAAQ,EACJ3E,QAAQ,IACR,CAACjB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAG4F,MAAM,CAACpE,KAAK,CAACmE,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACNhF,GAAG,EAAEc,cAAe;IACpBY,KAAK,EAAE;MAAE,GAAGkB;IAAc,CAAE;IAC5BqC,UAAU,EAAE;MACR1F,IAAI,EAAE,OAAO;MACb2F,QAAQ,EAAEtF,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEFxD,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAuI,gBAAgB;IAACxB,UAAU,EAAEhE;EAAU,GACnCZ,WACa,CACS,CACf,CAAC,EACpBI,mBAAmB,iBAChB/C,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAAwI,0BAA0B;IACvBvB,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE,IAAK;IACZsF,OAAO,EAAE;MAAEC,OAAO,EAAE1E,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvC6E,OAAO,EAAE,KAAM;IACfV,OAAO,EAAEjD,oBAAqB;IAC9B6D,UAAU,EAAE;MAAE1F,IAAI,EAAE;IAAQ;EAAE,gBAE9BnD,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAAC1G,KAAA,CAAAQ,OAAI;IACDmI,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBjD,KAAK,EAAEzC,SAAS,GAAGe,KAAK,CAAC4E,KAAK,GAAG1D;EAAU,CAC9C,CACuB,CAC/B,EACA5C,YAAY,IAAIwC,gBAAgB,IAAIxC,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACwC,gBAAgB,iBAC9BpF,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACxG,MAAA,CAAA2I,uBAAuB,QAAEvG,YAAsC,CAE3D,CAChB,EACD,CACIe,YAAY,EACZ4B,eAAe,EACfS,KAAK,EACLhB,oBAAoB,EACpBS,sBAAsB,EACtB3B,QAAQ,EACRL,EAAE,EACFrB,SAAS,EACTC,UAAU,EACVkB,SAAS,EACTiD,aAAa,EACbrE,WAAW,EACXG,MAAM,EACNE,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXsB,gBAAgB,EAChBrB,YAAY,EACZY,iCAAiC,EACjCV,uBAAuB,EACvBsC,gBAAgB,EAChBpC,yBAAyB,EACzBD,mBAAmB,EACnBF,0BAA0B,EAC1Ba,+BAA+B,EAC/BJ,kBAAkB,EAClBL,IAAI,EACJqB,KAAK,CAACmE,QAAQ,EACdnE,KAAK,CAAC4E,KAAK,EACX/F,IAAI,EACJC,KAAK,CAEb,CAAC;EAED,IAAIf,UAAU,IAAI,OAAOgB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACIrD,MAAA,CAAAc,OAAA,CAAAkG,aAAA,CAACrG,QAAA,CAAAG,OAAO;MAACsI,IAAI,EAAE;QAAEC,IAAI,EAAEhG;MAAa,CAAE;MAACiG,kBAAkB;IAAA,GACpDvC,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAED9E,KAAK,CAACsH,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAxH,OAAA,CAAAlB,OAAA,GAEbmB,KAAK","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: 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 content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: ReactNode;\n    /**\n     * Color of the placeholder text.\n     */\n    placeholderColor?: CSSProperties['color'];\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an 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\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            placeholderColor,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\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        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\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                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={color}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel\n                                    $color={placeholderColor}\n                                    $isInvalid={isInvalid}\n                                >\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                autoComplete,\n                backgroundColor,\n                color,\n                handleClearIconClick,\n                handleInputFieldChange,\n                hasValue,\n                id,\n                inputMode,\n                isDisabled,\n                isInvalid,\n                labelPosition,\n                leftElement,\n                onBlur,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                placeholder,\n                placeholderColor,\n                placeholderWidth,\n                rightElement,\n                shouldPreventPlaceholderAnimation,\n                shouldRemainPlaceholder,\n                shouldShowBorder,\n                shouldShowCenteredContent,\n                shouldShowClearIcon,\n                shouldShowOnlyBottomBorder,\n                shouldShowTransparentBackground,\n                shouldUseAutoFocus,\n                size,\n                theme.fontSize,\n                theme.wrong,\n                type,\n                value,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.styles.js

@@ -132,6 +132,8 @@ const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0
     position: absolute;
     user-select: none;
     max-width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
 `;
 const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
@@ -145,8 +147,9 @@ const StyledInputLabel = exports.StyledInputLabel = _styledComponents.default.la
     text-overflow: ellipsis;
     color: ${({
   theme,
+  $color,
   $isInvalid
-}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
+}) => $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};
 `;
 const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n        $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -22,6 +22,7 @@ const Input = /*#__PURE__*/forwardRef(({
   onKeyDown,
   onPaste,
   placeholder,
+  placeholderColor,
   rightElement,
   shouldShowOnlyBottomBorder,
   shouldRemainPlaceholder = false,
@@ -155,6 +156,7 @@ const Input = /*#__PURE__*/forwardRef(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/React.createElement(StyledInputLabel, {
+    $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -170,7 +172,7 @@ const Input = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderColor, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/React.createElement(Tooltip, {
       item: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: 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 content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an 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\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\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        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\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                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={color}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                autoComplete,\n                backgroundColor,\n                color,\n                handleClearIconClick,\n                handleInputFieldChange,\n                hasValue,\n                id,\n                inputMode,\n                isDisabled,\n                isInvalid,\n                labelPosition,\n                leftElement,\n                onBlur,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                placeholder,\n                placeholderWidth,\n                rightElement,\n                shouldPreventPlaceholderAnimation,\n                shouldRemainPlaceholder,\n                shouldShowBorder,\n                shouldShowCenteredContent,\n                shouldShowClearIcon,\n                shouldShowOnlyBottomBorder,\n                shouldShowTransparentBackground,\n                shouldUseAutoFocus,\n                size,\n                theme.fontSize,\n                theme.wrong,\n                type,\n                value,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: 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 content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: ReactNode;\n    /**\n     * Color of the placeholder text.\n     */\n    placeholderColor?: CSSProperties['color'];\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an 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\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            placeholderColor,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\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        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\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                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={color}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel\n                                    $color={placeholderColor}\n                                    $isInvalid={isInvalid}\n                                >\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                autoComplete,\n                backgroundColor,\n                color,\n                handleClearIconClick,\n                handleInputFieldChange,\n                hasValue,\n                id,\n                inputMode,\n                isDisabled,\n                isInvalid,\n                labelPosition,\n                leftElement,\n                onBlur,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                placeholder,\n                placeholderColor,\n                placeholderWidth,\n                rightElement,\n                shouldPreventPlaceholderAnimation,\n                shouldRemainPlaceholder,\n                shouldShowBorder,\n                shouldShowCenteredContent,\n                shouldShowClearIcon,\n                shouldShowOnlyBottomBorder,\n                shouldShowTransparentBackground,\n                shouldUseAutoFocus,\n                size,\n                theme.fontSize,\n                theme.wrong,\n                type,\n                value,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.styles.js

@@ -125,6 +125,8 @@ export const StyledMotionInputLabelWrapper = styled(motion.label)`
     position: absolute;
     user-select: none;
     max-width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
 `;
 export const StyledMotionInputElement = styled(motion.div)`
     display: flex;
@@ -138,8 +140,9 @@ export const StyledInputLabel = styled.label`
     text-overflow: ellipsis;
     color: ${({
   theme,
+  $color,
   $isInvalid
-}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
+}) => $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};
 `;
 export const StyledMotionInputClearIcon = styled(motion.div)`
     align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n        $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, type ReactElement, ReactNode } from 'react';
+import React, { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, type ReactElement, ReactNode } from 'react';
 export interface InputRef {
     focus: VoidFunction;
     blur: VoidFunction;
@@ -62,6 +62,10 @@ export type InputProps = {
      * Placeholder for the input field
      */
     placeholder?: ReactNode;
+    /**
+     * Color of the placeholder text.
+     */
+    placeholderColor?: CSSProperties['color'];
     /**
      * An element that should be displayed on the right side of the Input.
      */

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

@@ -32,6 +32,7 @@ export declare const StyledMotionInputElement: import("styled-components/dist/ty
     ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 type StyledInputLabelProps = WithTheme<{
+    $color?: CSSProperties['color'];
     $isInvalid?: boolean;
 }>;
 export declare const StyledInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledInputLabelProps>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.9",
+    "version": "5.0.10",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "bcd0a506394b53466667deac455edf4d408fc2f2"
+    "gitHead": "2bc1bfdf935bb58af6b3b06e2904054d9fe2c7c9"
 }