npm - @chayns-components/core - Versions diffs - 5.0.0-beta.653 → 5.0.0-beta.654 - Mend

@chayns-components/core 5.0.0-beta.653 → 5.0.0-beta.654

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 (17) hide show

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

@@ -136,7 +136,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     animate: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? {
       scale: 0.4,
       x: '6px',
-      y: '2px'
+      y: '1px'
     } : {
       scale: 1
     },

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","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","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","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledMotionInputElement","scale","x","y","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n 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 StyledMotionInputElement,\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 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 Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: 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 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 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 placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = 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) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\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 >\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 fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '2px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\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","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","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","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledMotionInputElement","scale","x","y","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n 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 StyledMotionInputElement,\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 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 Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: 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 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 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 placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = 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) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\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 >\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 fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '1px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\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

@@ -95,7 +95,7 @@ const StyledInputField = exports.StyledInputField = _styledComponents.default.in
         `}
 `;
 const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0, _styledComponents.default)(_framerMotion.motion.label)`
-    align-items: baseline;
+    align-items: center;
     display: flex;
     flex: 0 0 auto;
     gap: 4px;
@@ -105,7 +105,9 @@ const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0
     user-select: none;
     max-width: 100%;
 `;
-const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_framerMotion.motion.div)``;
+const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    display: flex;
+`;
 const StyledInputLabel = exports.StyledInputLabel = _styledComponents.default.label`
     line-height: 1.3;
     pointer-events: none;

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","$shouldShowOnlyBottomBorder","css","$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';\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}>;\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 ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\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: ~~baseline~~;\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\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<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n justify-content: center;\n width: 40px;\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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~~EAAE~~;~~AAIrD~~,MAAMqB,gBAAgB,GAAAvB,OAAA,CAAAuB,gBAAA,GAAGtB,yBAAM,CAACoB,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEhB,KAAK;EAAEG;AAAkC,CAAC,KAClDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGe,SAAS;AAC5C,CAAC;AAIM,MAAMC,0BAA0B,GAAAzB,OAAA,CAAAyB,0BAAA,GAAG,IAAAxB,yBAAM,EAACmB,oBAAM,CAAClB,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;EAAEQ;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMgB,sBAAsB,GAAA1B,OAAA,CAAA0B,sBAAA,GAAGzB,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMyB,uBAAuB,GAAA3B,OAAA,CAAA2B,uBAAA,GAAG1B,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","$shouldShowOnlyBottomBorder","css","$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';\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}>;\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 ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\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<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n justify-content: center;\n width: 40px;\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/cjs/components/number-input/NumberInput.js CHANGED Viewed

@@ -34,9 +34,6 @@ const NumberInput = ({
   const [isValueInvalid, setIsValueInvalid] = (0, _react.useState)(false);
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
   const onLocalChange = event => {
-    if (isValueInvalid || isInvalid) {
-      return;
-    }
     const newValue = event.target.value;
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points

package/lib/cjs/components/number-input/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (isValueInvalid \|\| isInvalid) {\n return;\n }\n\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js CHANGED Viewed

@@ -15,6 +15,7 @@ const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
     align-items: center;
     justify-content: center;
     touch-action: none;
+    user-select: none;
 `;
 const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.input.attrs(({
   $isInterval,

package/lib/cjs/components/slider/Slider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled.input.attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth / 2}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n style: {\n left: `${$position}px`,\n },\n}))`\n min-width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,KAAK,CAACC,KAAK,CAC/C,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;IAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACC,GAAG,CAACG,KAAK,CAAyB,CAAC;EAAEa;AAAU,CAAC,MAAM;EAC1FN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGD,SAAS;EACtB;AACJ,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAApB,OAAA,CAAAoB,sBAAA,GAAGnB,yBAAM,CAACoB,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled.input.attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth / 2}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n style: {\n left: `${$position}px`,\n },\n}))`\n min-width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,KAAK,CAACC,KAAK,CAC/C,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;IAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACC,GAAG,CAACG,KAAK,CAAyB,CAAC;EAAEa;AAAU,CAAC,MAAM;EAC1FN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGD,SAAS;EACtB;AACJ,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAApB,OAAA,CAAAoB,sBAAA,GAAGnB,yBAAM,CAACoB,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -124,7 +124,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     animate: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? {
       scale: 0.4,
       x: '6px',
-      y: '2px'
+      y: '1px'
     } : {
       scale: 1
     },

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","StyledMotionInputElement","StyledMotionInputLabelWrapper","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","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","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","scale","x","y","opacity","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 StyledMotionInputElement,\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 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 Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: 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 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 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 placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = 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) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\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 >\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 fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '2px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\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","StyledMotionInputElement","StyledMotionInputLabelWrapper","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","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","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","scale","x","y","opacity","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 StyledMotionInputElement,\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 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 Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: 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 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 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 placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = 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) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\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 >\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 fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '1px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\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":"AAAA,OAAOA,KAAK,IAIRC,UAAU,EAIVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,WAAW,EACXC,kBAAkB,EAClBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,6BAA6B,QAC1B,gBAAgB;AAgGvB,MAAMC,KAAK,gBAAGtB,UAAU,CACpB,CAAAuB,IAAA,EAsBIC,GAAG,KACF;EAAA,IAtBD;IACIC,WAAW;IACXC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,YAAY;IACZC,0BAA0B;IAC1BC,uBAAuB,GAAG,KAAK;IAC/BC,mBAAmB,GAAG,KAAK;IAC3BC,yBAAyB,GAAG,KAAK;IACjCC,IAAI,GAAG,MAAM;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,SAAS,GAAG,KAAK;IACjBC;EACJ,CAAC,GAAApB,IAAA;EAGD,MAAM,CAACqB,QAAQ,EAAEC,WAAW,CAAC,GAAGtC,QAAQ,CAAC,OAAOiC,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACM,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGxC,QAAQ,CAAC,CAAC,CAAC;EAE3D,MAAMyC,YAAY,GAAG9C,UAAU,CAACQ,WAAW,CAAC;EAE5C,MAAMuC,KAAK,GAAGzC,QAAQ,CAAC,CAAU;EAEjC,MAAM0C,QAAQ,GAAG5C,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM6C,cAAc,GAAG7C,MAAM,CAAmB,IAAI,CAAC;EAErD,MAAM8C,eAAe,GAAG3C,cAAc,CAAC0C,cAAc,CAAC;EAEtDhD,SAAS,CAAC,MAAM;IACZ,IAAIiD,eAAe,IAAIjB,0BAA0B,EAAE;MAC/CY,mBAAmB,CAACK,eAAe,CAACC,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACD,eAAe,EAAEjB,0BAA0B,CAAC,CAAC;EAEjD,MAAMmB,iBAAiB,GAAGjD,OAAO,CAC7B,MAAM2C,YAAY,CAACM,iBAAiB,IAAI,KAAK,EAC7C,CAACN,YAAY,CAACM,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGtD,WAAW,CAAC,MAAM;IAC3C,IAAIiD,QAAQ,CAACM,OAAO,EAAE;MAClBN,QAAQ,CAACM,OAAO,CAAChB,KAAK,GAAG,EAAE;MAE3BK,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOhB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE4B,MAAM,EAAEP,QAAQ,CAACM;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC3B,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAM6B,gBAAgB,GAAGxB,YAAY,EAAEyB,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG9D,WAAW,CACrC+D,KAAoC,IAAK;IACtCnB,WAAW,CAACmB,KAAK,CAACP,MAAM,CAACjB,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmC,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACnC,QAAQ,CACb,CAAC;EAEDzB,mBAAmB,CACfoB,GAAG,EACH,OAAO;IACHyC,KAAK,EAAEA,CAAA,KAAMf,QAAQ,CAACM,OAAO,EAAES,KAAK,CAAC;EACzC,CAAC,CAAC,EACF,EACJ,CAAC;EAED9D,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOqC,KAAK,KAAK,QAAQ,EAAE;MAC3BK,WAAW,CAACL,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAM0B,aAAa,GAAG7D,OAAO,CAAC,MAAM;IAChC,IAAIuC,QAAQ,IAAI,CAACR,uBAAuB,EAAE;MACtC,OAAOD,0BAA0B,GAC3B;QAAEgC,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE,CAAC,EAAE;QAAEF,KAAK,EAAE,CAAC;MAAE,CAAC;IACpC;IAEA,OAAO;MAAEG,IAAI,EAAErC,kBAAkB,GAAG,CAAC,GAAG,CAAC;IAAE,CAAC;EAChD,CAAC,EAAE,CAACW,QAAQ,EAAEX,kBAAkB,EAAEG,uBAAuB,EAAED,0BAA0B,CAAC,CAAC;EAEvF,oBACIpC,KAAA,CAAAwE,aAAA,CAAC3D,WAAW;IAAC4D,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE9C;EAAW,gBAC/D5B,KAAA,CAAAwE,aAAA,CAACzD,yBAAyB;IACtB4D,kBAAkB,EAAEpB,iBAAkB;IACtCqB,UAAU,EAAEjC,SAAU;IACtBkC,wBAAwB,EAAElB,gBAAiB;IAC3CmB,2BAA2B,EAAE1C;EAA2B,GAEvDV,WAAW,iBAAI1B,KAAA,CAAAwE,aAAA,CAACvD,sBAAsB,QAAES,WAAoC,CAAC,eAC9E1B,KAAA,CAAAwE,aAAA,CAAC1D,kBAAkB;IAACgE,2BAA2B,EAAE1C;EAA2B,gBACxEpC,KAAA,CAAAwE,aAAA,CAACxD,gBAAgB;IACb+D,iBAAiB,EAAEhC,gBAAiB;IACpCH,EAAE,EAAEA,EAAG;IACPoC,QAAQ,EAAEpD,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkC,sBAAuB;IACjCjC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBP,GAAG,EAAE0B,QAAS;IACdX,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbwC,SAAS,EAAEvC,kBAAmB;IAC9Bf,SAAS,EAAEA,SAAU;IACrBiD,UAAU,EAAEjC,SAAU;IACtBuC,0BAA0B,EAAE3C;EAA0B,CACzD,CAAC,eACFvC,KAAA,CAAAwE,aAAA,CAAClD,6BAA6B;IAC1B6D,OAAO,EAAE;MACLC,QAAQ,EACJvC,QAAQ,IACR,CAACT,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL;IACd,CAAE;IACFgD,OAAO,EAAE,KAAM;IACfC,MAAM;IACN7D,GAAG,EAAE2B,cAAe;IACpBS,KAAK,EAAE;MAAE,GAAGM;IAAc,CAAE;IAC5BoB,UAAU,EAAE;MAAE/C,IAAI,EAAE,OAAO;MAAEgD,QAAQ,EAAE;IAAI;EAAE,gBAE7CxF,KAAA,CAAAwE,aAAA,CAACnD,wBAAwB;IACrB8D,OAAO,EACHtC,QAAQ,IACR,CAACT,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB;MAAEoD,KAAK,EAAE,GAAG;MAAEC,CAAC,EAAE,KAAK;MAAEC,CAAC,EAAE;IAAM,CAAC,GAClC;MAAEF,KAAK,EAAE;IAAE,CACpB;IACDJ,OAAO,EAAE,KAAM;IACfC,MAAM;IACNC,UAAU,EAAE;MAAE/C,IAAI,EAAE,OAAO;MAAEgD,QAAQ,EAAE;IAAI;EAAE,GAE5CtD,kBACqB,CAAC,eAC3BlC,KAAA,CAAAwE,aAAA,CAACtD,gBAAgB;IAAC0D,UAAU,EAAEjC;EAAU,GACnCV,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBtC,KAAA,CAAAwE,aAAA,CAACpD,0BAA0B;IACvB0D,2BAA2B,EAAE1C,0BAA2B;IACxD+C,OAAO,EAAE;MAAES,OAAO,EAAE/C,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCwC,OAAO,EAAE,KAAM;IACfQ,OAAO,EAAErC,oBAAqB;IAC9B+B,UAAU,EAAE;MAAE/C,IAAI,EAAE;IAAQ;EAAE,gBAE9BxC,KAAA,CAAAwE,aAAA,CAAC5D,IAAI;IACDkF,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBC,KAAK,EAAEpD,SAAS,GAAGO,KAAK,CAAC8C,KAAK,GAAGjC;EAAU,CAC9C,CACuB,CAC/B,EACA5B,YAAY,IAAIwB,gBAAgB,IAAIxB,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACwB,gBAAgB,iBAC9B3D,KAAA,CAAAwE,aAAA,CAACrD,uBAAuB,QAAEgB,YAAsC,CAE3D,CAAC;AAEtB,CACJ,CAAC;AAEDZ,KAAK,CAAC0E,WAAW,GAAG,OAAO;AAE3B,eAAe1E,KAAK","ignoreList":[]}

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

@@ -115,7 +115,7 @@ export const StyledInputField = styled.input`
 }}
 `;
 export const StyledMotionInputLabelWrapper = styled(motion.label)`
-    align-items: baseline;
+    align-items: center;
     display: flex;
     flex: 0 0 auto;
     gap: 4px;
@@ -125,7 +125,9 @@ export const StyledMotionInputLabelWrapper = styled(motion.label)`
     user-select: none;
     max-width: 100%;
 `;
-export const StyledMotionInputElement = styled(motion.div)``;
+export const StyledMotionInputElement = styled(motion.div)`
+    display: flex;
+`;
 export const StyledInputLabel = styled.label`
     line-height: 1.3;
     pointer-events: none;

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","$shouldShowOnlyBottomBorder","_ref6","$shouldRoundRightCorners","StyledInputContent","_ref7","StyledInputField","input","_ref8","text","_ref9","$placeholderWidth","_ref10","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref11","undefined","StyledMotionInputClearIcon","_ref12","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';\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}>;\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 ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\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: ~~baseline~~;\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\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<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n justify-content: center;\n width: 40px;\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":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAqB;AACvD,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;AASD,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACG,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAmD,CAAC,GAAAF,KAAA;EAAA,OAC9EC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,KAAK,CAAC;AAAA;AACxE;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,KAAA;EAAA,OAC9B,CAACC,2BAA2B,IAC5Bf,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMgB,KAAA,IAAsE;EAAA,IAArE;IAAEC,wBAAwB;IAAEF,2BAA2B;IAAER;EAAM,CAAC,GAAAS,KAAA;EAC/D,IAAID,2BAA2B,EAAE;IAC7B,OAAOf,GAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCO,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,IAAIU,wBAAwB,EAAE;IAC1B,OAAOjB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,MAAMkB,kBAAkB,GAAGnB,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA,cAAciB,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OACtC,CAACJ,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAAA;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMK,gBAAgB,GAAGrB,MAAM,CAACsB,KAA4B;AACnE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEf,KAAK;IAAEI;EAAkC,CAAC,GAAAW,KAAA;EAAA,OAClDX,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACgB,IAAI;AAAA;AAC7C;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OAAK,eAAeC,iBAAiB,KAAK;AAAA;AAC7E;AACA;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,MAAA;EAAA,OAC7BC,0BAA0B,IAC1B3B,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAM4B,6BAA6B,GAAG7B,MAAM,CAACD,MAAM,CAAC+B,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAG/B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC,~~EAAE~~;~~AAI5D~~,OAAO,MAAM6B,gBAAgB,GAAGhC,MAAM,CAAC8B,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,MAAA;EAAA,IAAC;IAAEzB,KAAK;IAAEI;EAAkC,CAAC,GAAAqB,MAAA;EAAA,OAClDrB,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGqB,SAAS;AAAA;AAC5C,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAGnC,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,mBAAmBiC,MAAA;EAAA,IAAC;IAAEpB;EAA4B,CAAC,GAAAoB,MAAA;EAAA,OAC3CpB,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,sBAAsB,GAAGrC,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmC,uBAAuB,GAAGtC,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","$shouldShowOnlyBottomBorder","_ref6","$shouldRoundRightCorners","StyledInputContent","_ref7","StyledInputField","input","_ref8","text","_ref9","$placeholderWidth","_ref10","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref11","undefined","StyledMotionInputClearIcon","_ref12","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';\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}>;\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 ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\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<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n justify-content: center;\n width: 40px;\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/number-input/NumberInput.js CHANGED Viewed

@@ -26,9 +26,6 @@ const NumberInput = _ref => {
   const [isValueInvalid, setIsValueInvalid] = useState(false);
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
   const onLocalChange = event => {
-    if (isValueInvalid || isInvalid) {
-      return;
-    }
     const newValue = event.target.value;
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points

package/lib/esm/components/number-input/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (isValueInvalid \|\| isInvalid) {\n return;\n }\n\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","includes","length","valueToCheck","replaceAll","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n /*\n Applies rules for decimal input.\n * Enables the user to input one zero as number before the comma\n /\n isDecimalInput?: boolean;\n /\n Whether the input is disabled\n /\n isDisabled?: boolean;\n /\n Whether the value is invalid.\n /\n isInvalid?: boolean;\n /\n Applies rules for money input.\n * Rules: only two decimal places, one zero before the comma\n /\n isMoneyInput?: boolean;\n /\n Whether the value should be formatted as a time.\n /\n isTimeInput?: boolean;\n /\n Limits the number to this value\n /\n maxNumber?: number;\n /\n Limits the number to this value\n /\n minNumber?: number;\n /\n Callback function that is called when the input gets out of focus\n /\n onBlur?: (newNumber: number \| string \| null, isInvalid: boolean) => void;\n /\n Callback function that is called when the input changes\n * It will pass the text from the input\n /\n onChange?: (newValue: string) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n The value, that should be displayed in the input, when it is in focus.\n * You can also pass a stringified number as default value.\n * NOTE: If you pass a stringified number, it will be formatted to the selected format\n */\n value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n isDecimalInput,\n isMoneyInput,\n isTimeInput,\n isInvalid,\n maxNumber = Infinity,\n value,\n placeholder,\n onBlur,\n isDisabled,\n onChange,\n shouldShowOnlyBottomBorder,\n minNumber = -Infinity,\n}) => {\n // the plainText will be shown in the input, when it is in focus\n const [plainText, setPlainText] = useState<string>('');\n // the formattedValue will be shown in the input, when it is not in focus\n const [formattedValue, setFormattedValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n const [isValueInvalid, setIsValueInvalid] = useState(false);\n const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n\n const sanitizedValueString = newValue\n // Removes everything except numbers, commas and points\n .replace(NUMBER_CLEAR_REGEX, '');\n\n if (\n isTimeInput &&\n ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) \|\|\n (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n ) {\n return;\n }\n\n const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n return;\n }\n\n if (\n (maxNumber && Number(valueToCheck) > maxNumber) \|\|\n (minNumber && Number(valueToCheck) < minNumber)\n ) {\n return;\n }\n\n if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n setShouldRemainPlaceholder(true);\n } else {\n setShouldRemainPlaceholder(false);\n }\n\n setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n if (typeof onChange === 'function') {\n onChange(sanitizedValueString.replaceAll('.', ','));\n }\n };\n\n const onLocalBlur = () => {\n const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n let newIsInvalid = false;\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n if (parsedNumber !== 0 && (parsedNumber > maxNumber \|\| parsedNumber < minNumber)) {\n newIsInvalid = true;\n }\n\n setIsValueInvalid(newIsInvalid);\n }\n\n const newStringValue =\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? sanitizedValue : parsedNumber,\n isMoneyInput,\n isTimeInput,\n });\n\n setFormattedValue(newStringValue);\n setPlainText(newStringValue.replaceAll('.', ''));\n setHasFocus(false);\n\n if (typeof onChange === 'function') {\n onChange(newStringValue.replaceAll('.', ''));\n }\n\n if (typeof onBlur === 'function') {\n if (isTimeInput) {\n onBlur(newStringValue, newIsInvalid);\n } else {\n onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n }\n }\n };\n\n const onLocalFocus = () => {\n // formattedValue will be a number string with german number format (e.g. 1.000,00)\n // It will remove all dots, so that the user can type in the number\n setPlainText(formattedValue.replaceAll('.', ''));\n\n // This will update the external state\n if (typeof onChange === 'function') {\n onChange(formattedValue.replaceAll('.', ''));\n }\n\n setIsValueInvalid(false);\n setHasFocus(true);\n };\n\n // updates the formattedValue, when the value changes\n useEffect(() => {\n let parsedNumber = null;\n\n if (!isTimeInput) {\n parsedNumber = parseFloatWithDecimals({\n stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n decimals: isMoneyInput ? 2 : undefined,\n });\n\n // checks, if a given number is invalid, if the input is not in focus\n if (!hasFocus) {\n setIsValueInvalid(parsedNumber > maxNumber \|\| parsedNumber < minNumber);\n }\n }\n\n setFormattedValue(\n plainText.length === 0\n ? ''\n : formateNumber({\n number: isTimeInput ? plainText : parsedNumber,\n isMoneyInput,\n isTimeInput,\n }),\n );\n }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n useEffect(() => {\n if (typeof value === 'string') {\n setPlainText(value);\n }\n }, [value]);\n\n return (\n <Input\n shouldRemainPlaceholder={shouldRemainPlaceholder}\n shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n inputMode=\"decimal\"\n onChange={onLocalChange}\n value={hasFocus ? plainText : formattedValue}\n placeholder={localPlaceholder}\n onBlur={onLocalBlur}\n onFocus={onLocalFocus}\n isDisabled={isDisabled}\n isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider/Slider.styles.js CHANGED Viewed

@@ -8,6 +8,7 @@ export const StyledSlider = styled.div`
     align-items: center;
     justify-content: center;
     touch-action: none;
+    user-select: none;
 `;
 export const StyledSliderInput = styled.input.attrs(_ref => {
   let {

package/lib/esm/components/slider/Slider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","names":["styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","left","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled.input.attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth / 2}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n style: {\n left: `${$position}px`,\n },\n}))`\n min-width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,KAAK,CAACC,KAAK,CAC/CC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;MAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAAyBc,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAC1FN,KAAK,EAAE;MACHQ,IAAI,EAAE,GAAGD,SAAS;IACtB;EACJ,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,sBAAsB,GAAGtB,MAAM,CAACuB,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Slider.styles.js","names":["styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","left","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled.input.attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth / 2}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n style: {\n left: `${$position}px`,\n },\n}))`\n min-width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,KAAK,CAACC,KAAK,CAC/CC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;MAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAAyBc,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAC1FN,KAAK,EAAE;MACHQ,IAAI,EAAE,GAAGD,SAAS;IACtB;EACJ,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,sBAAsB,GAAGtB,MAAM,CAACuB,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.653",
+    "version": "5.0.0-beta.654",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e5d7b2abfc1466a13d7f1041e52b59520f0d3a83"
+    "gitHead": "ba2933adab2130bdb92b7d567df9f6e3b2eb8db0"
 }