npm - @chayns-components/core - Versions diffs - 5.4.7 → 5.4.8-alpha.0 - Mend

@chayns-components/core 5.4.7 → 5.4.8-alpha.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","internalColor","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","border","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={color?.border}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel\n $color={color?.placeholder}\n $isInvalid={isInvalid}\n >\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n color?.placeholder,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n rightElement,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","shouldEnableKeyboardHighlighting","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","handleClearIconKeyDown","event","key","_inputRef$current","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","internalColor","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","borderColor","border","placeholderColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","tabIndex","role","icons","wrong","StyledInputRightElement","$isInline","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const handleClearIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleClearIconClick();\n inputRef.current?.focus();\n }\n },\n [handleClearIconClick],\n );\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const borderColor = color?.border;\n const placeholderColor = color?.placeholder;\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={borderColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n onKeyDown={handleClearIconKeyDown}\n tabIndex={\n shouldShowKeyboardHighlighting && hasValue && !isDisabled\n ? 0\n : -1\n }\n role={shouldShowKeyboardHighlighting ? 'button' : undefined}\n aria-hidden={!hasValue}\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 && (\n <StyledInputRightElement $isInline>\n {rightElement}\n </StyledInputRightElement>\n )}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n borderColor,\n placeholderColor,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n handleClearIconKeyDown,\n rightElement,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAkBA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAWA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AACA,IAAAU,6BAAA,GAAAV,OAAA;AAAwF,SAAAK,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAhB,uBAAA,YAAAA,CAAAY,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAiC5EgB,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAqHrB,MAAME,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CACI;EACIC,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,KAAK;EACLC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAGnB,SAAS,CAACoB,MAAM;EACvBC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC,iCAAiC,GAAG,KAAK;EACzCC,EAAE;EACFC,+BAA+B,GAAG,KAAK;EACvCC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOb,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACc,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAErD,IAAAE,wBAAgB,EAACH,QAAQ,CAAC;EAE1B,MAAMI,eAAe,GAAG,IAAAC,uBAAc,EAACH,cAAc,CAAC;EAEtD,IAAAI,gBAAS,EAAC,MAAM;IACZ,IAAIF,eAAe,IAAIhC,0BAA0B,EAAE;MAC/CsB,mBAAmB,CAACU,eAAe,CAACG,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACH,eAAe,EAAEhC,0BAA0B,CAAC,CAAC;EAEjD,MAAMoC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIT,QAAQ,CAACU,OAAO,EAAE;MAClBV,QAAQ,CAACU,OAAO,CAAC/B,KAAK,GAAG,EAAE;MAE3BY,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAO1B,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE8C,MAAM,EAAEX,QAAQ,CAACU;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC7C,QAAQ,CAAC,CAAC;EAEd,MAAM+C,sBAAsB,GAAG,IAAAH,kBAAW,EACrCI,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAAA,IAAAC,iBAAA;MAC5CF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBR,oBAAoB,CAAC,CAAC;MACtB,CAAAO,iBAAA,GAAAf,QAAQ,CAACU,OAAO,cAAAK,iBAAA,eAAhBA,iBAAA,CAAkBE,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EACD,CAACT,oBAAoB,CACzB,CAAC;;EAED;EACA,MAAMU,gBAAgB,GAAG,CAAA/C,YAAY,aAAZA,YAAY,gBAAAkB,mBAAA,GAAZlB,YAAY,CAAEgD,KAAK,cAAA9B,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqB+B,KAAK,cAAA/B,mBAAA,uBAA1BA,mBAAA,CAA4BgC,eAAe,MAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG,IAAAd,kBAAW,EACrCI,KAAoC,IAAK;IACtCtB,WAAW,CAACsB,KAAK,CAACF,MAAM,CAAChC,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACgD,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAAChD,QAAQ,CACb,CAAC;EAED,IAAA2D,0BAAmB,EACfpC,GAAG,EACH,OAAO;IACH6B,KAAK,EAAEA,CAAA;MAAA,IAAAQ,kBAAA;MAAA,QAAAA,kBAAA,GAAMzB,QAAQ,CAACU,OAAO,cAAAe,kBAAA,uBAAhBA,kBAAA,CAAkBR,KAAK,CAAC,CAAC;IAAA;IACtCS,IAAI,EAAEA,CAAA;MAAA,IAAAC,kBAAA;MAAA,QAAAA,kBAAA,GAAM3B,QAAQ,CAACU,OAAO,cAAAiB,kBAAA,uBAAhBA,kBAAA,CAAkBD,IAAI,CAAC,CAAC;IAAA;EACxC,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAApB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO3B,KAAK,KAAK,QAAQ,EAAE;MAC3BY,WAAW,CAACZ,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAI0C,eAA6D;EACjE,IAAIO,aAAiD;EAErD,IAAI3C,+BAA+B,EAAE;IACjCoC,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACH1B,YAAY,CAACkC,eAAe,IAC5B,CAACC,4BAAe,CAACC,KAAK,EAAED,4BAAe,CAACE,OAAO,EAAEF,4BAAe,CAACG,OAAO,CAAC,CAACC,QAAQ,CAC9EvC,YAAY,CAACkC,eACjB,CAAC,EACH;IACER,eAAe,GAAG,OAAO;IACzBO,aAAa,GAAG,MAAM;EAC1B,CAAC,MAAM,IAAIjC,YAAY,CAACwC,iBAAiB,EAAE;IACvCd,eAAe,GAAGvB,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAMsC,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DlD,gCAAgC,IAAI,CAACxB,UACzC,CAAC;EAED,MAAM2E,WAAW,GAAGpE,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEqE,MAAM;EACjC,MAAMC,gBAAgB,GAAGtE,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAED,WAAW;EAE3C,MAAMwE,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAIpD,QAAQ,IAAI,CAACjB,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAEuE,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAErE,IAAI,KAAKnB,SAAS,CAACyF,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;QAAEH,KAAK,EAAE,CAAC;MAAE,CAAC;IACpE;IAEA,OAAO;MAAEI,IAAI,EAAE,CAAC,CAAC;MAAEH,GAAG,EAAE,CAAC;IAAI,CAAC;EAClC,CAAC,EAAE,CACCtD,QAAQ,EACRP,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAMwE,YAAY,GAAG,IAAAN,cAAO,EACxB,mBACIrH,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAqH,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAEzF;EAAW,gBAC/DtC,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAwH,yBAAyB;IACtBC,gCAAgC,EAAErE,+BAAgC;IAClEsE,gBAAgB,EAAElC,eAAgB;IAClCmC,UAAU,EAAE1E,SAAU;IACtB2E,wBAAwB,EAAEvC,gBAAiB;IAC3CwC,2BAA2B,EAAEtF,0BAA2B;IACxDuF,KAAK,EAAEnF,IAAK;IACZoF,YAAY,EAAEtB,WAAY;IAC1BuB,+BAA+B,EAAEzB;EAA+B,GAE/D3E,WAAW,iBACRpC,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAiI,sBAAsB,QAAErG,WAAoC,CAChE,eACDpC,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAkI,kBAAkB;IACfL,2BAA2B,EAAEtF;EAA2B,gBAExD/C,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAmI,gBAAgB;IACbC,MAAM,EAAErC,aAAc;IACtBsC,iBAAiB,EAAEzE,gBAAiB;IACpCT,EAAE,EAAEA,EAAG;IACPmF,QAAQ,EAAExG,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAE0D,sBAAuB;IACjCzD,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBqG,OAAO,EAAGvD,KAAK,IAAK;MAChBA,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBH,KAAK,CAACwD,eAAe,CAAC,CAAC;IAC3B,CAAE;IACFrG,OAAO,EAAEA,OAAQ;IACjBoB,GAAG,EAAEY,QAAS;IACdtB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACb2F,SAAS,EAAEzF,kBAAmB;IAC9BnB,SAAS,EAAEA,SAAU;IACrBwB,YAAY,EAAEA,YAAa;IAC3BsE,UAAU,EAAE1E,SAAU;IACtByF,0BAA0B,EAAEhG;EAA0B,CACzD,CAAC,eACFlD,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAA2I,6BAA6B;IAC1BC,OAAO,EACH1F,iCAAiC,GAC3B;MACI2F,OAAO,EAAEpF,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACIqF,QAAQ,EACJrF,QAAQ,IACR,CAAClB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAGuG,MAAM,CAAC9E,KAAK,CAAC6E,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACN1F,GAAG,EAAEc,cAAe;IACpBkB,KAAK,EAAE;MAAE,GAAGqB;IAAc,CAAE;IAC5BsC,UAAU,EAAE;MACRrG,IAAI,EAAE,OAAO;MACbsG,QAAQ,EAAEjG,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEF1D,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAoJ,gBAAgB;IAAChB,MAAM,EAAEzB,gBAAiB;IAACgB,UAAU,EAAE1E;EAAU,GAC7Db,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBjD,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAAqJ,0BAA0B;IACvBxB,2BAA2B,EAAEtF,0BAA2B;IACxDuF,KAAK,EAAEnF,IAAK;IACZqF,+BAA+B,EAAEzB,8BAA+B;IAChEqC,OAAO,EAAE;MAAEC,OAAO,EAAEpF,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCuF,OAAO,EAAE,KAAM;IACfT,OAAO,EAAE5D,oBAAqB;IAC9BzC,SAAS,EAAE6C,sBAAuB;IAClCuE,QAAQ,EACJ/C,8BAA8B,IAAI9C,QAAQ,IAAI,CAAC3B,UAAU,GACnD,CAAC,GACD,CAAC,CACV;IACDyH,IAAI,EAAEhD,8BAA8B,GAAG,QAAQ,GAAGd,SAAU;IAC5D,eAAa,CAAChC,QAAS;IACvByF,UAAU,EAAE;MAAErG,IAAI,EAAE;IAAQ;EAAE,gBAE9BrD,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACtH,KAAA,CAAAS,OAAI;IACDiJ,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBnH,KAAK,EAAEY,SAAS,GAAGgB,KAAK,CAACwF,KAAK,GAAGhE;EAAU,CAC9C,CACuB,CAC/B,EACAnD,YAAY,IAAI+C,gBAAgB,iBAC7B7F,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAA0J,uBAAuB;IAACC,SAAS;EAAA,GAC7BrH,YACoB,CAEN,CAAC,EAC3BA,YAAY,IAAI,CAAC+C,gBAAgB,iBAC9B7F,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACpH,MAAA,CAAA0J,uBAAuB,QAAEpH,YAAsC,CAE3D,CAChB,EACD,CACIR,UAAU,EACVsB,+BAA+B,EAC/BoC,eAAe,EACfvC,SAAS,EACToC,gBAAgB,EAChB9C,0BAA0B,EAC1BI,IAAI,EACJf,WAAW,EACXmE,aAAa,EACbnC,gBAAgB,EAChBT,EAAE,EACFpB,MAAM,EACN2D,sBAAsB,EACtBzD,OAAO,EACPC,SAAS,EACTC,OAAO,EACPU,IAAI,EACJC,KAAK,EACLE,kBAAkB,EAClBnB,SAAS,EACTwB,YAAY,EACZX,yBAAyB,EACzBQ,iCAAiC,EACjCO,QAAQ,EACRjB,uBAAuB,EACvByB,KAAK,CAAC6E,QAAQ,EACd7E,KAAK,CAACwF,KAAK,EACX7C,aAAa,EACbH,WAAW,EACXE,gBAAgB,EAChBvE,WAAW,EACXK,mBAAmB,EACnBkC,oBAAoB,EACpBI,sBAAsB,EACtBzC,YAAY,EACZgB,gCAAgC,EAChCiD,8BAA8B,CAEtC,CAAC;EAED,IAAIzE,UAAU,IAAI,OAAOiB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACIvD,MAAA,CAAAe,OAAA,CAAA6G,aAAA,CAACjH,QAAA,CAAAI,OAAO;MAACqJ,IAAI,EAAE;QAAEC,IAAI,EAAE9G;MAAa,CAAE;MAAC+G,kBAAkB;IAAA,GACpD3C,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAEDzF,KAAK,CAACqI,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAvI,OAAA,CAAAlB,OAAA,GAEbmB,KAAK","ignoreList":[]}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionInputLabelWrapper = exports.StyledMotionInputElement = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledInput = exports.StyledInput = _styledComponents.default.div`
     opacity: ${({
@@ -96,6 +97,16 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
             border-right: none;
         `;
 }}
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            /* Show highlighting when the input field is focused */
+            &:has(input:focus-visible) {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
     display: flex;
@@ -168,6 +179,15 @@ const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _sty
     width: ${({
   $size
 }) => $size === 'medium' ? '40px' : '30px'};
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponents.default.div`
     align-items: baseline;
@@ -177,9 +197,24 @@ const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponent
     margin-left: 10px;
 `;
 const StyledInputRightElement = exports.StyledInputRightElement = _styledComponents.default.div`
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
-    overflow: hidden;
     flex: 0 0 auto;
+    overflow: hidden;
+    min-width: 28px;
+    text-align: center;
+    ${({
+  $isInline
+}) => !$isInline && (0, _styledComponents.css)`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `}
+    &:has(*:focus-visible) {
+        overflow: visible;
+    }
+    .beta-chayns-icon:focus-visible::after {
+        transform: translate(-50%, -50%) scale(0.78);
+    }
 `;
 //# sourceMappingURL=Input.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOzC,MAAMkB,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAYM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,gBAAgB,IAAID,KAAK,CAAC,KAAK,CAAC;AACxC;AACA,aAAa,CAAC;EAAEA;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,KAAK;EAAEE,UAAU;EAAEC,gCAAgC;EAAEC;AAAa,CAAC,KAAK;EACzE,IAAIA,YAAY,EACZ,OAAO,IAAAC,qBAAG;AACtB,gCAAgCD,YAAY;AAC5C,aAAa;EACL,IAAIF,UAAU,EAAE;IACZ,OAAO,IAAAG,qBAAG;AACtB,gCAAgCL,KAAK,CAACM,KAAK;AAC3C,aAAa;EACL;EAEA,IAAIH,gCAAgC,EAAE;IAClC,IAAIH,KAAK,CAACO,SAAS,KAAK,MAAM,EAAE;MAC5B,OAAO,IAAAF,qBAAG;AAC1B;AACA,iBAAiB;IACL;IAEA,OAAO,IAAAA,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEG;AAAM,CAAC,KACRA,KAAK,KAAK,OAAO,IACjB,IAAAH,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEI,2BAA2B;EAAED;AAAM,CAAC,KACrC,CAACC,2BAA2B,IAC5B,IAAAJ,qBAAG;AACX,0BAA0BG,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAC9D,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,wBAAwB;EAAED,2BAA2B;EAAET;AAAM,CAAC,KAAK;EACpE,IAAIS,2BAA2B,EAAE;IAC7B,OAAO,IAAAJ,qBAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCL,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,IAAIU,wBAAwB,EAAE;IAC1B,OAAO,IAAAL,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAIM,MAAMM,kBAAkB,GAAAhB,OAAA,CAAAgB,kBAAA,GAAGf,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA,cAAc,CAAC;EAAEY;AAA4B,CAAC,KACtC,CAACA,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAC3D;AACA,CAAC;AASM,MAAMG,gBAAgB,GAAAjB,OAAA,CAAAiB,gBAAA,GAAGhB,yBAAM,CAACiB,KAA4B;AACnE;AACA;AACA,aAAa,CAAC;EAAEb,KAAK;EAAEc,MAAM;EAAEZ;AAAkC,CAAC,KAC1DY,MAAM,KAAKZ,UAAU,GAAGF,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACe,IAAI,CAAC;AACzD;AACA,aAAa,CAAC;EAAEC;AAAkB,CAAC,KAAK,eAAeA,iBAAiB,KAAK;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAA2B,CAAC,KAC7BA,0BAA0B,IAC1B,IAAAZ,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMa,6BAA6B,GAAAvB,OAAA,CAAAuB,6BAAA,GAAG,IAAAtB,yBAAM,EAACuB,aAAM,CAACC,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAA1B,OAAA,CAAA0B,wBAAA,GAAG,IAAAzB,yBAAM,EAACuB,aAAM,CAACtB,GAAG,CAAC;AAC1D;AACA,CAAC;AAOM,MAAMyB,gBAAgB,GAAA3B,OAAA,CAAA2B,gBAAA,GAAG1B,yBAAM,CAACwB,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEpB,KAAK;EAAEc,MAAM;EAAEZ;AAAkC,CAAC,KAC1DY,MAAM,KAAKZ,UAAU,GAAGF,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;AACvF,CAAC;AAOM,MAAMuB,0BAA0B,GAAA5B,OAAA,CAAA4B,0BAAA,GAAG,IAAA3B,yBAAM,EAACuB,aAAM,CAACtB,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;EAAEY;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA,cAAc,CAAC;EAAED;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAClE,CAAC;AAEM,MAAMgB,sBAAsB,GAAA7B,OAAA,CAAA6B,sBAAA,GAAG5B,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAM4B,uBAAuB,GAAA9B,OAAA,CAAA8B,uBAAA,GAAG7B,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement","$isInline"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n /* Show highlighting when the input field is focused /\n &:has(input:focus-visible) {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\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\ntype StyledInputRightElementProps = {\n $isInline?: boolean;\n};\n\nexport const StyledInputRightElement = styled.div<StyledInputRightElementProps>`\n flex: 0 0 auto;\n overflow: hidden;\n min-width: 28px;\n text-align: center;\n\n ${({ $isInline }) =>\n !$isInline &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n\n &:has(:focus-visible) {\n overflow: visible;\n }\n\n .beta-chayns-icon:focus-visible::after {\n transform: translate(-50%, -50%) scale(0.78);\n }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/List.js CHANGED Viewed

@@ -7,25 +7,40 @@ exports.default = exports.ListContext = void 0;
 var _reactCompilerRuntime = require("react-compiler-runtime");
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
+var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
+var _uuid = require("../../hooks/uuid");
 var _List = require("./List.utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ListContext = exports.ListContext = /*#__PURE__*/_react2.default.createContext({
   isAnyItemExpandable: false,
   isWrapped: false,
   openItemUuid: undefined,
-  updateOpenItemUuid: () => {}
+  updateOpenItemUuid: () => {},
+  shouldEnableKeyboardHighlighting: false,
+  listGroupUuid: undefined,
+  listItemUuids: undefined,
+  registerListItemUuid: undefined,
+  unregisterListItemUuid: undefined,
+  activeListItemUuid: undefined,
+  updateActiveListItemUuid: undefined
 });
 ListContext.displayName = 'ListContext';
 const List = t0 => {
   "use memo";
-  const $ = (0, _reactCompilerRuntime.c)(13);
+  const $ = (0, _reactCompilerRuntime.c)(24);
   const {
     children,
-    isWrapped: t1
+    isWrapped: t1,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const isWrapped = t1 === undefined ? false : t1;
+  const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
   const [openItemUuid, setOpenItemUuid] = (0, _react2.useState)(undefined);
+  const [listItemUuids, setListItemUuids] = (0, _react2.useState)();
+  const [activeListItemUuid, setActiveListItemUuid] = (0, _react2.useState)(undefined);
+  const listGroupUuid = (0, _uuid.useUuid)();
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = (uuid, t3) => {
@@ -45,63 +60,135 @@ const List = t0 => {
   }
   const updateOpenItemUuid = t2;
   let t3;
-  if ($[1] !== children) {
-    t3 = (0, _List.shouldShowExpandIndicator)(children);
-    $[1] = children;
+  if ($[1] !== listGroupUuid) {
+    t3 = uuids => {
+      if (typeof document === "undefined") {
+        return uuids;
+      }
+      const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${listGroupUuid}---"]`)).map(_temp).filter(_temp2);
+      return domOrderedUuids.filter(uuid_1 => uuids.includes(uuid_1));
+    };
+    $[1] = listGroupUuid;
     $[2] = t3;
   } else {
     t3 = $[2];
   }
+  const sortListItemUuidsByDom = t3;
   let t4;
-  if ($[3] !== isWrapped || $[4] !== openItemUuid || $[5] !== t3) {
-    t4 = {
-      isAnyItemExpandable: t3,
+  if ($[3] !== sortListItemUuidsByDom) {
+    t4 = uuid_2 => {
+      setListItemUuids(t5 => {
+        const currentListItemUuids = t5 === undefined ? [] : t5;
+        const nextListItemUuids = currentListItemUuids.includes(uuid_2) ? currentListItemUuids : [...currentListItemUuids, uuid_2];
+        return sortListItemUuidsByDom(nextListItemUuids);
+      });
+    };
+    $[3] = sortListItemUuidsByDom;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const registerListItemUuid = t4;
+  let t5;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = uuid_3 => {
+      setListItemUuids(t6 => {
+        const currentListItemUuids_0 = t6 === undefined ? [] : t6;
+        return currentListItemUuids_0.filter(currentUuid => currentUuid !== uuid_3);
+      });
+    };
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const unregisterListItemUuid = t5;
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = uuid_4 => {
+      setActiveListItemUuid(uuid_4);
+    };
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const updateActiveListItemUuid = t6;
+  let t7;
+  if ($[7] !== children) {
+    t7 = (0, _List.shouldShowExpandIndicator)(children);
+    $[7] = children;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== activeListItemUuid || $[10] !== isWrapped || $[11] !== listGroupUuid || $[12] !== listItemUuids || $[13] !== openItemUuid || $[14] !== registerListItemUuid || $[15] !== shouldEnableKeyboardHighlightingEffective || $[16] !== t7) {
+    t8 = {
+      isAnyItemExpandable: t7,
       isWrapped,
       openItemUuid,
-      updateOpenItemUuid
+      updateOpenItemUuid,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+      listGroupUuid,
+      listItemUuids,
+      registerListItemUuid,
+      unregisterListItemUuid,
+      activeListItemUuid,
+      updateActiveListItemUuid
     };
-    $[3] = isWrapped;
-    $[4] = openItemUuid;
-    $[5] = t3;
-    $[6] = t4;
+    $[9] = activeListItemUuid;
+    $[10] = isWrapped;
+    $[11] = listGroupUuid;
+    $[12] = listItemUuids;
+    $[13] = openItemUuid;
+    $[14] = registerListItemUuid;
+    $[15] = shouldEnableKeyboardHighlightingEffective;
+    $[16] = t7;
+    $[17] = t8;
   } else {
-    t4 = $[6];
+    t8 = $[17];
   }
-  const providerValue = t4;
-  let t5;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
+  const providerValue = t8;
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
       type: "tween"
     };
-    $[7] = t5;
+    $[18] = t9;
   } else {
-    t5 = $[7];
+    t9 = $[18];
   }
-  let t6;
-  if ($[8] !== children) {
-    t6 = /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
-      transition: t5
+  let t10;
+  if ($[19] !== children) {
+    t10 = /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
+      transition: t9
     }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
       initial: false
     }, children));
-    $[8] = children;
-    $[9] = t6;
+    $[19] = children;
+    $[20] = t10;
   } else {
-    t6 = $[9];
+    t10 = $[20];
   }
-  let t7;
-  if ($[10] !== providerValue || $[11] !== t6) {
-    t7 = /*#__PURE__*/_react2.default.createElement(ListContext.Provider, {
+  let t11;
+  if ($[21] !== providerValue || $[22] !== t10) {
+    t11 = /*#__PURE__*/_react2.default.createElement(ListContext.Provider, {
       value: providerValue
-    }, t6);
-    $[10] = providerValue;
-    $[11] = t6;
-    $[12] = t7;
+    }, t10);
+    $[21] = providerValue;
+    $[22] = t10;
+    $[23] = t11;
   } else {
-    t7 = $[12];
+    t11 = $[23];
   }
-  return t7;
+  return t11;
 };
 List.displayName = 'List';
 var _default = exports.default = List;
+function _temp(element) {
+  var _element$getAttribute;
+  return (_element$getAttribute = element.getAttribute("data-uuid")) === null || _element$getAttribute === void 0 ? void 0 : _element$getAttribute.split("---")[1];
+}
+function _temp2(uuid_0) {
+  return Boolean(uuid_0);
+}
 //# sourceMappingURL=List.js.map

package/lib/cjs/components/list/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.js","names":["_react","require","_react2","_interopRequireWildcard","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","setOpenItemUuid","useState","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","shouldShowExpandIndicator","t4","providerValue","t5","type","t6","createElement","MotionConfig","transition","AnimatePresence","initial","t7","Provider","_default"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string \| undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /*\n The items of the list\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: shouldShowExpandIndicator(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"List.js","names":["_react","require","_react2","_interopRequireWildcard","_ColorSchemeProvider","_uuid","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListContext","exports","React","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","shouldEnableKeyboardHighlighting","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","displayName","List","t0","$","_reactCompilerRuntime","c","children","t1","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","setOpenItemUuid","useState","setListItemUuids","setActiveListItemUuid","useUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","uuids","document","domOrderedUuids","Array","from","querySelectorAll","map","_temp","filter","_temp2","uuid_1","includes","sortListItemUuidsByDom","t4","uuid_2","t5","currentListItemUuids","nextListItemUuids","uuid_3","t6","currentListItemUuids_0","currentUuid","uuid_4","t7","shouldShowExpandIndicator","t8","providerValue","t9","type","t10","createElement","MotionConfig","transition","AnimatePresence","initial","t11","Provider","_default","element","_element$getAttribute","getAttribute","split","uuid_0","Boolean"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useUuid } from '../../hooks/uuid';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string \| undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n shouldEnableKeyboardHighlighting: boolean;\n listGroupUuid?: string;\n listItemUuids?: string[];\n registerListItemUuid?: (uuid: string) => void;\n unregisterListItemUuid?: (uuid: string) => void;\n activeListItemUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n shouldEnableKeyboardHighlighting: false,\n listGroupUuid: undefined,\n listItemUuids: undefined,\n registerListItemUuid: undefined,\n unregisterListItemUuid: undefined,\n activeListItemUuid: undefined,\n updateActiveListItemUuid: undefined,\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /*\n The items of the list\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n /\n isWrapped?: boolean;\n /\n Enables keyboard-only focus highlighting and arrow-key navigation within the list.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false, shouldEnableKeyboardHighlighting }) => {\n 'use memo';\n\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n const [listItemUuids, setListItemUuids] = useState<string[]>();\n const [activeListItemUuid, setActiveListItemUuid] =\n useState<IListContext['activeListItemUuid']>(undefined);\n\n const listGroupUuid = useUuid();\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const sortListItemUuidsByDom = useCallback(\n (uuids: string[]) => {\n if (typeof document === 'undefined') {\n return uuids;\n }\n\n const domOrderedUuids = Array.from(\n document.querySelectorAll<HTMLElement>(`[data-uuid^=\"${listGroupUuid}---\"]`),\n )\n .map((element) => element.getAttribute('data-uuid')?.split('---')[1])\n .filter((uuid): uuid is string => Boolean(uuid));\n\n return domOrderedUuids.filter((uuid) => uuids.includes(uuid));\n },\n [listGroupUuid],\n );\n\n const registerListItemUuid = useCallback(\n (uuid: string) => {\n setListItemUuids((currentListItemUuids = []) => {\n const nextListItemUuids = currentListItemUuids.includes(uuid)\n ? currentListItemUuids\n : [...currentListItemUuids, uuid];\n\n return sortListItemUuidsByDom(nextListItemUuids);\n });\n },\n [sortListItemUuidsByDom],\n );\n\n const unregisterListItemUuid = useCallback((uuid: string) => {\n setListItemUuids((currentListItemUuids = []) =>\n currentListItemUuids.filter((currentUuid) => currentUuid !== uuid),\n );\n }, []);\n\n const updateActiveListItemUuid = useCallback((uuid?: string) => {\n setActiveListItemUuid(uuid);\n }, []);\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: shouldShowExpandIndicator(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n }),\n [\n children,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlightingEffective,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n ],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}