npm - @chayns-components/core - Versions diffs - 5.0.0-beta.924 → 5.0.0-beta.925 - Mend

@chayns-components/core 5.0.0-beta.924 → 5.0.0-beta.925

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport 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 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 a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\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 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 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 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 },\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 shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\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 $shouldChangeColor={shouldChangeColor}\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 $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $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":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport 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 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 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 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 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 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 },\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 shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\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 $shouldChangeColor={shouldChangeColor}\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 $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $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/input/Input.styles.js CHANGED Viewed

@@ -125,7 +125,7 @@ const StyledInputLabel = exports.StyledInputLabel = _styledComponents.default.la
     color: ${({
   theme,
   $isInvalid
-}) => $isInvalid ? theme.wrong : undefined};
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
 `;
 const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-items: center;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$size","css","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","~~undefined","~~StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\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 $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\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 ${({ $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 $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $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 : ~~undefined~~};\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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~~GAAGgB~~,SAAS;~~AAC5C~~,CAAC;AAOM,~~MAAMC~~,0BAA0B,~~GAAA1B~~,OAAA,~~CAAA0B~~,0BAAA,GAAG,~~IAAAzB~~,yBAAM,EAACoB,oBAAM,CAACnB,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;EAAEU;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA,cAAc,CAAC;EAAEF;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAClE,CAAC;AAEM,~~MAAMiB~~,sBAAsB,~~GAAA3B~~,OAAA,~~CAAA2B~~,sBAAA,~~GAAG1B~~,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,~~MAAM0B~~,uBAAuB,~~GAAA5B~~,OAAA,~~CAAA4B~~,uBAAA,~~GAAG3B~~,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$size","css","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\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 $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\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 ${({ $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 $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $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":[]}

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

	@@ -1 +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","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport 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 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 a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\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 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 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 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 },\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 shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\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 $shouldChangeColor={shouldChangeColor}\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 $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $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":[]}
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","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport 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 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 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 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 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 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 },\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 shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\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 $shouldChangeColor={shouldChangeColor}\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 $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $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/input/Input.styles.js CHANGED Viewed

@@ -150,7 +150,7 @@ export const StyledInputLabel = styled.label`
     theme,
     $isInvalid
   } = _ref12;
-  return $isInvalid ? theme.wrong : undefined;
+  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
 }};
 `;
 export const StyledMotionInputClearIcon = styled(motion.div)`

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","~~undefined","~~StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\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 $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\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 ${({ $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 $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $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 : ~~undefined~~};\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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~~GAAGuB~~,SAAS;AAAA;~~AAC5C~~,CAAC;AAOD,OAAO,~~MAAMC~~,0BAA0B,~~GAAGrC~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,~~mBAAmBmC~~,MAAA;EAAA,IAAC;~~IAAEpB~~;EAA4B,CAAC,~~GAAAoB~~,MAAA;EAAA,~~OAC3CpB~~,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA;AACnF;AACA;AACA;AACA,~~cAAcqB~~,MAAA;EAAA,IAAC;~~IAAEvB~~;EAAM,CAAC,~~GAAAuB~~,MAAA;EAAA,~~OAAMvB~~,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACnE;AACA,~~aAAawB~~,MAAA;EAAA,IAAC;~~IAAExB~~;EAAM,CAAC,~~GAAAwB~~,MAAA;EAAA,~~OAAMxB~~,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClE,CAAC;AAED,OAAO,~~MAAMyB~~,sBAAsB,~~GAAGzC~~,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMuC~~,uBAAuB,~~GAAG1C~~,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\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 $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\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 ${({ $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 $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $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":[]}

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

@@ -47,7 +47,7 @@ export type InputProps = {
     /**
      * Placeholder for the input field
      */
-    placeholder?: string;
+    placeholder?: ReactNode;
     /**
      * An element that should be displayed on the right side of the Input.
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.924",
+    "version": "5.0.0-beta.925",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "97f084bf188f7ba257b8ce8e74b840bbef756f23"
+    "gitHead": "65959a86d26a83ac3ca9155ae8b44fc10ad1b983"
 }