@chayns-components/core 5.0.0-beta.1282 → 5.0.0-beta.1284

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","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","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","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","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","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';\n\nexport type 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     * 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            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        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        return (\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 && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\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);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","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","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","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","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","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';\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     * 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            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        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        return (\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 && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\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);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/page-provider/PageProvider.styles.js

@@ -11,6 +11,7 @@ const StyledPageProvider = exports.StyledPageProvider = _styledComponents.defaul
   $usableHeight
 }) => $usableHeight ? `${$usableHeight}px` : undefined};
     position: relative;
+
     ${({
   $shouldUsePadding
 }) => $shouldUsePadding ? `
@@ -20,21 +21,9 @@ const StyledPageProvider = exports.StyledPageProvider = _styledComponents.defaul
         }
     ` : 'padding: 0px;'}
 
-    .color-scheme-provider:first-child:not(td) {
-        & > h1,
-        & > .h1,
-        & > h2,
-        & > .h2,
-        & > h3,
-        & > .h3,
-        & > h4,
-        & > .h4,
-        & > h5,
-        & > .h5 {
-            &:first-of-type:first-child {
-                margin-top: 0;
-            }
-        }
+    // ToDo: Remove .h1...
+    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
+        margin-top: 0;
     }
 `;
 //# sourceMappingURL=PageProvider.styles.js.map

package/lib/cjs/components/page-provider/PageProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$usableHeight","undefined","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $shouldUsePadding?: boolean;\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n    ${({ $shouldUsePadding }) =>\n        $shouldUsePadding\n            ? `\n        padding: 15px 10px 20px;\n        @media screen and (min-width: 33.5em) {\n            padding: 35px 43px 30px;\n        }\n    `\n            : 'padding: 0px;'}\n\n    .color-scheme-provider:first-child:not(td) {\n        & > h1,\n        & > .h1,\n        & > h2,\n        & > .h2,\n        & > h3,\n        & > .h3,\n        & > h4,\n        & > .h4,\n        & > h5,\n        & > .h5 {\n            &:first-of-type:first-child {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$usableHeight","undefined","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $shouldUsePadding?: boolean;\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n\n    ${({ $shouldUsePadding }) =>\n        $shouldUsePadding\n            ? `\n        padding: 15px 10px 20px;\n        @media screen and (min-width: 33.5em) {\n            padding: 35px 43px 30px;\n        }\n    `\n            : 'padding: 0px;'}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","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","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","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';\n\nexport type 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     * 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            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        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        return (\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 && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\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);\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","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","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","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","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';\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     * 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            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        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        return (\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 && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\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);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.styles.js

@@ -4,6 +4,7 @@ export const StyledPageProvider = styled.div`
   $usableHeight
 }) => $usableHeight ? `${$usableHeight}px` : undefined};
     position: relative;
+
     ${({
   $shouldUsePadding
 }) => $shouldUsePadding ? `
@@ -13,21 +14,9 @@ export const StyledPageProvider = styled.div`
         }
     ` : 'padding: 0px;'}
 
-    .color-scheme-provider:first-child:not(td) {
-        & > h1,
-        & > .h1,
-        & > h2,
-        & > .h2,
-        & > h3,
-        & > .h3,
-        & > h4,
-        & > .h4,
-        & > h5,
-        & > .h5 {
-            &:first-of-type:first-child {
-                margin-top: 0;
-            }
-        }
+    // ToDo: Remove .h1...
+    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
+        margin-top: 0;
     }
 `;
 //# sourceMappingURL=PageProvider.styles.js.map

package/lib/esm/components/page-provider/PageProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProvider.styles.js","names":["styled","StyledPageProvider","div","$usableHeight","undefined","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $shouldUsePadding?: boolean;\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n    ${({ $shouldUsePadding }) =>\n        $shouldUsePadding\n            ? `\n        padding: 15px 10px 20px;\n        @media screen and (min-width: 33.5em) {\n            padding: 35px 43px 30px;\n        }\n    `\n            : 'padding: 0px;'}\n\n    .color-scheme-provider:first-child:not(td) {\n        & > h1,\n        & > .h1,\n        & > h2,\n        & > .h2,\n        & > h3,\n        & > .h3,\n        & > h4,\n        & > .h4,\n        & > h5,\n        & > .h5 {\n            &:first-of-type:first-child {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAOtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PageProvider.styles.js","names":["styled","StyledPageProvider","div","$usableHeight","undefined","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $shouldUsePadding?: boolean;\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n\n    ${({ $shouldUsePadding }) =>\n        $shouldUsePadding\n            ? `\n        padding: 15px 10px 20px;\n        @media screen and (min-width: 33.5em) {\n            padding: 35px 43px 30px;\n        }\n    `\n            : 'padding: 0px;'}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAOtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, type ReactElement, ReactNode } from 'react';
-export type InputRef = {
+export interface InputRef {
     focus: VoidFunction;
     blur: VoidFunction;
-};
+}
 type InputMode = 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal' | undefined;
 type AutoComplete = 'on' | 'off' | 'name' | 'username' | 'email' | 'new-password' | 'current-password' | 'tel' | 'url' | 'street-address' | 'postal-code' | 'country' | undefined;
 export declare enum InputSize {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1282",
+    "version": "5.0.0-beta.1284",
     "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": "58e7e4a12a68afcef1684834f8d0db01df5a05ab"
+    "gitHead": "862f00508a3ccd51c7d610acf044fa873616fa07"
 }