@chayns-components/core 5.3.10 → 5.3.12-alpha.0

package/lib/cjs/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_Icon","_styledComponents","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","theme","useTheme","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={tabIndex}\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' && !isDisabled ? handleClick : undefined}\n            $isOnClick={typeof onClick === 'function' && !isDisabled}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            $size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_Icon","_styledComponents","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","theme","useTheme","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","onKeyDown","$shouldShowKeyboardHighlighting","$size","role","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/icon/Icon.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledUnicodeIcon = exports.StyledIconWrapper = exports.StyledIcon = void 0;
 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 StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.span`
     align-items: center;
@@ -26,6 +27,28 @@ const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.
   $size
 }) => `${$size}px`};
 
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $size
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-visible {
+                outline: none;
+                color: inherit;
+            }
+
+            &:focus-visible::after {
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: ${$size + 14}px;
+                height: ${$size + 14}px;
+                transform: translate(-50%, -50%);
+                pointer-events: none;
+            }
+        `}
+
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {
         height: fit-content;

package/lib/cjs/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingCircleRingCss","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    ${({ $shouldShowKeyboardHighlighting, $size }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                color: inherit;\n            }\n\n            &:focus-visible::after {\n                ${keyboardFocusHighlightingCircleRingCss};\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: ${$size + 14}px;\n                height: ${$size + 14}px;\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n            }\n        `}\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,6 +13,7 @@ var _Input = require("./Input.styles");
 var _contentCard = require("../../types/contentCard");
 var _resize = require("../../hooks/resize");
 var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 let InputSize = exports.InputSize = /*#__PURE__*/function (InputSize) {
@@ -45,7 +46,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   shouldPreventPlaceholderAnimation = false,
   id,
   shouldShowTransparentBackground = false,
-  autoComplete
+  autoComplete,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   var _rightElement$props;
   const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
@@ -72,6 +74,14 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       }
     }
   }, [onChange]);
+  const handleClearIconKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      var _inputRef$current;
+      event.preventDefault();
+      handleClearIconClick();
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    }
+  }, [handleClearIconClick]);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
@@ -83,12 +93,12 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [onChange]);
   (0, _react.useImperativeHandle)(ref, () => ({
     focus: () => {
-      var _inputRef$current;
-      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      var _inputRef$current2;
+      return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     },
     blur: () => {
-      var _inputRef$current2;
-      return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      var _inputRef$current3;
+      return (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.blur();
     }
   }), []);
   (0, _react.useEffect)(() => {
@@ -106,6 +116,9 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   } else if (areaProvider.shouldChangeColor) {
     backgroundColor = theme['000'];
   }
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  const borderColor = color === null || color === void 0 ? void 0 : color.border;
+  const placeholderColor = color === null || color === void 0 ? void 0 : color.placeholder;
   const labelPosition = (0, _react.useMemo)(() => {
     if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
       return shouldShowOnlyBottomBorder ? {
@@ -131,7 +144,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
-    $borderColor: color === null || color === void 0 ? void 0 : color.border
+    $borderColor: borderColor,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
@@ -173,23 +187,30 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
-    $color: color === null || color === void 0 ? void 0 : color.placeholder,
+    $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: hasValue ? 1 : 0
     },
     initial: false,
     onClick: handleClearIconClick,
+    onKeyDown: handleClearIconKeyDown,
+    tabIndex: shouldEnableKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
+    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    "aria-hidden": !hasValue,
     transition: {
       type: 'tween'
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, color === null || color === void 0 ? void 0 : color.placeholder, placeholder, shouldShowClearIcon, handleClearIconClick, rightElement]);
+  })), rightElement && shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
+    $isInline: true
+  }, rightElement)), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, borderColor, placeholderColor, placeholder, shouldShowClearIcon, handleClearIconClick, handleClearIconKeyDown, rightElement, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
       item: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAkBA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAWA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAAyC,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAiC7BgB,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAiHrB,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;AACJ,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOZ,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACa,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAErD,IAAAE,wBAAgB,EAACH,QAAQ,CAAC;EAE1B,MAAMI,eAAe,GAAG,IAAAC,uBAAc,EAACH,cAAc,CAAC;EAEtD,IAAAI,gBAAS,EAAC,MAAM;IACZ,IAAIF,eAAe,IAAI/B,0BAA0B,EAAE;MAC/CqB,mBAAmB,CAACU,eAAe,CAACG,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACH,eAAe,EAAE/B,0BAA0B,CAAC,CAAC;EAEjD,MAAMmC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIT,QAAQ,CAACU,OAAO,EAAE;MAClBV,QAAQ,CAACU,OAAO,CAAC9B,KAAK,GAAG,EAAE;MAE3BW,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOzB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAE6C,MAAM,EAAEX,QAAQ,CAACU;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAC5C,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAM8C,gBAAgB,GAAG,CAAAxC,YAAY,aAAZA,YAAY,gBAAAiB,mBAAA,GAAZjB,YAAY,CAAEyC,KAAK,cAAAxB,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqByB,KAAK,cAAAzB,mBAAA,uBAA1BA,mBAAA,CAA4B0B,eAAe,MAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG,IAAAR,kBAAW,EACrCS,KAAoC,IAAK;IACtC3B,WAAW,CAAC2B,KAAK,CAACP,MAAM,CAAC/B,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACoD,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACpD,QAAQ,CACb,CAAC;EAED,IAAAqD,0BAAmB,EACf/B,GAAG,EACH,OAAO;IACHgC,KAAK,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMrB,QAAQ,CAACU,OAAO,cAAAW,iBAAA,uBAAhBA,iBAAA,CAAkBD,KAAK,CAAC,CAAC;IAAA;IACtCE,IAAI,EAAEA,CAAA;MAAA,IAAAC,kBAAA;MAAA,QAAAA,kBAAA,GAAMvB,QAAQ,CAACU,OAAO,cAAAa,kBAAA,uBAAhBA,kBAAA,CAAkBD,IAAI,CAAC,CAAC;IAAA;EACxC,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAhB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO1B,KAAK,KAAK,QAAQ,EAAE;MAC3BW,WAAW,CAACX,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAImC,eAA6D;EACjE,IAAIS,aAAiD;EAErD,IAAItC,+BAA+B,EAAE;IACjC6B,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACHpB,YAAY,CAAC8B,eAAe,IAC5B,CAACC,4BAAe,CAACC,KAAK,EAAED,4BAAe,CAACE,OAAO,EAAEF,4BAAe,CAACG,OAAO,CAAC,CAACC,QAAQ,CAC9EnC,YAAY,CAAC8B,eACjB,CAAC,EACH;IACEV,eAAe,GAAG,OAAO;IACzBS,aAAa,GAAG,MAAM;EAC1B,CAAC,MAAM,IAAI7B,YAAY,CAACoC,iBAAiB,EAAE;IACvChB,eAAe,GAAGjB,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAMkC,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAI3C,QAAQ,IAAI,CAAChB,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAE6D,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE3D,IAAI,KAAKnB,SAAS,CAAC+E,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,CACC7C,QAAQ,EACRN,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAM8D,YAAY,GAAG,IAAAN,cAAO,EACxB,mBACI1G,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA0G,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE/E;EAAW,gBAC/DrC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA6G,yBAAyB;IACtBC,gCAAgC,EAAE3D,+BAAgC;IAClE4D,gBAAgB,EAAE/B,eAAgB;IAClCgC,UAAU,EAAEhE,SAAU;IACtBiE,wBAAwB,EAAEpC,gBAAiB;IAC3CqC,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE,IAAK;IACZ0E,YAAY,EAAEhF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEiF;EAAO,GAE3B1F,WAAW,iBACRnC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAsH,sBAAsB,QAAE3F,WAAoC,CAChE,eACDnC,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAuH,kBAAkB;IACfL,2BAA2B,EAAE5E;EAA2B,gBAExD9C,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAwH,gBAAgB;IACbC,MAAM,EAAEhC,aAAc;IACtBiC,iBAAiB,EAAEhE,gBAAiB;IACpCR,EAAE,EAAEA,EAAG;IACPyE,QAAQ,EAAE9F,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEmD,sBAAuB;IACjClD,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrB2F,OAAO,EAAGzC,KAAK,IAAK;MAChBA,KAAK,CAAC0C,cAAc,CAAC,CAAC;MACtB1C,KAAK,CAAC2C,eAAe,CAAC,CAAC;IAC3B,CAAE;IACF5F,OAAO,EAAEA,OAAQ;IACjBmB,GAAG,EAAEY,QAAS;IACdrB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbkF,SAAS,EAAEhF,kBAAmB;IAC9BnB,SAAS,EAAEA,SAAU;IACrBwB,YAAY,EAAEA,YAAa;IAC3B4D,UAAU,EAAEhE,SAAU;IACtBgF,0BAA0B,EAAEvF;EAA0B,CACzD,CAAC,eACFjD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAAiI,6BAA6B;IAC1BC,OAAO,EACHjF,iCAAiC,GAC3B;MACIkF,OAAO,EAAE5E,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACI6E,QAAQ,EACJ7E,QAAQ,IACR,CAACjB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAG8F,MAAM,CAACtE,KAAK,CAACqE,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACNlF,GAAG,EAAEc,cAAe;IACpBY,KAAK,EAAE;MAAE,GAAGkB;IAAc,CAAE;IAC5BuC,UAAU,EAAE;MACR5F,IAAI,EAAE,OAAO;MACb6F,QAAQ,EAAExF,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEFzD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA0I,gBAAgB;IACbjB,MAAM,EAAErF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAED,WAAY;IAC3B6E,UAAU,EAAEhE;EAAU,GAErBb,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBhD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA2I,0BAA0B;IACvBzB,2BAA2B,EAAE5E,0BAA2B;IACxD6E,KAAK,EAAEzE,IAAK;IACZwF,OAAO,EAAE;MAAEC,OAAO,EAAE5E,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvC+E,OAAO,EAAE,KAAM;IACfV,OAAO,EAAEnD,oBAAqB;IAC9B+D,UAAU,EAAE;MAAE5F,IAAI,EAAE;IAAQ;EAAE,gBAE9BpD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAAC3G,KAAA,CAAAQ,OAAI;IACDsI,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBxG,KAAK,EAAEY,SAAS,GAAGe,KAAK,CAAC8E,KAAK,GAAG5D;EAAU,CAC9C,CACuB,CAC/B,EACA5C,YAAY,IAAIwC,gBAAgB,IAAIxC,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACwC,gBAAgB,iBAC9BrF,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACzG,MAAA,CAAA8I,uBAAuB,QAAEzG,YAAsC,CAE3D,CAChB,EACD,CACIR,UAAU,EACVsB,+BAA+B,EAC/B6B,eAAe,EACfhC,SAAS,EACT6B,gBAAgB,EAChBvC,0BAA0B,EAC1BI,IAAI,EACJf,WAAW,EACX8D,aAAa,EACb/B,gBAAgB,EAChBR,EAAE,EACFpB,MAAM,EACNoD,sBAAsB,EACtBlD,OAAO,EACPC,SAAS,EACTC,OAAO,EACPU,IAAI,EACJC,KAAK,EACLE,kBAAkB,EAClBnB,SAAS,EACTwB,YAAY,EACZX,yBAAyB,EACzBQ,iCAAiC,EACjCM,QAAQ,EACRhB,uBAAuB,EACvBwB,KAAK,CAACqE,QAAQ,EACdrE,KAAK,CAAC8E,KAAK,EACX5C,aAAa,EACb7D,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAED,WAAW,EAClBA,WAAW,EACXK,mBAAmB,EACnBiC,oBAAoB,EACpBpC,YAAY,CAEpB,CAAC;EAED,IAAIR,UAAU,IAAI,OAAOiB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACItD,MAAA,CAAAc,OAAA,CAAAmG,aAAA,CAACtG,QAAA,CAAAG,OAAO;MAACyI,IAAI,EAAE;QAAEC,IAAI,EAAElG;MAAa,CAAE;MAACmG,kBAAkB;IAAA,GACpDzC,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAED/E,KAAK,CAACyH,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAA3H,OAAA,CAAAlB,OAAA,GAEbmB,KAAK","ignoreList":[]}
+{"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                                    shouldEnableKeyboardHighlighting && hasValue && !isDisabled\n                                        ? 0\n                                        : -1\n                                }\n                                role={shouldEnableKeyboardHighlighting ? '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":"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","ignoreList":[]}

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

@@ -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,15 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
             border-right: none;
         `;
 }}
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
+            &:focus-within {
+                transition: none;
+                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
     display: flex;
@@ -168,6 +178,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 +196,20 @@ 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;
+        `}
+
+    .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

@@ -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":"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","ignoreList":[]}
+{"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            &:focus-within {\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    .beta-chayns-icon:focus-visible::after {\n        transform: translate(-50%, -50%) scale(0.78);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAIA,IAAAG,0BAAA,GAAAH,OAAA;AAAgG,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAIzF,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;AAaM,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;AACA,MAAM,CAAC;EAAEM;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAN,qBAAG;AACX;AACA;AACA,kBAAkBO,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,kBAAkB,GAAAlB,OAAA,CAAAkB,kBAAA,GAAGjB,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA,cAAc,CAAC;EAAEY;AAA4B,CAAC,KACtC,CAACA,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAC3D;AACA,CAAC;AASM,MAAMK,gBAAgB,GAAAnB,OAAA,CAAAmB,gBAAA,GAAGlB,yBAAM,CAACmB,KAA4B;AACnE;AACA;AACA,aAAa,CAAC;EAAEf,KAAK;EAAEgB,MAAM;EAAEd;AAAkC,CAAC,KAC1Dc,MAAM,KAAKd,UAAU,GAAGF,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACiB,IAAI,CAAC;AACzD;AACA,aAAa,CAAC;EAAEC;AAAkB,CAAC,KAAK,eAAeA,iBAAiB,KAAK;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAA2B,CAAC,KAC7BA,0BAA0B,IAC1B,IAAAd,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMe,6BAA6B,GAAAzB,OAAA,CAAAyB,6BAAA,GAAG,IAAAxB,yBAAM,EAACyB,aAAM,CAACC,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAA5B,OAAA,CAAA4B,wBAAA,GAAG,IAAA3B,yBAAM,EAACyB,aAAM,CAACxB,GAAG,CAAC;AAC1D;AACA,CAAC;AAOM,MAAM2B,gBAAgB,GAAA7B,OAAA,CAAA6B,gBAAA,GAAG5B,yBAAM,CAAC0B,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEtB,KAAK;EAAEgB,MAAM;EAAEd;AAAkC,CAAC,KAC1Dc,MAAM,KAAKd,UAAU,GAAGF,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;AACvF,CAAC;AAQM,MAAMyB,0BAA0B,GAAA9B,OAAA,CAAA8B,0BAAA,GAAG,IAAA7B,yBAAM,EAACyB,aAAM,CAACxB,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;AACA,MAAM,CAAC;EAAEG;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAN,qBAAG;AACX;AACA;AACA,kBAAkBO,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAEM,MAAMc,sBAAsB,GAAA/B,OAAA,CAAA+B,sBAAA,GAAG9B,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAM8B,uBAAuB,GAAAhC,OAAA,CAAAgC,uBAAA,GAAG/B,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAE+B;AAAU,CAAC,KACZ,CAACA,SAAS,IACV,IAAAvB,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}