@itcase/ui 1.9.56 → 1.9.58

package/dist/components/Image/Image.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { urlWithAssetPrefix } from 'src/hoc/urlWithAssetPrefix';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
+    const { className, dataTestId, dataTour, type, src, title, alt, caption, imageClassName, imageWrapperClassName, mode, overlay, placeholderUrl, before, after, isSkeleton, onClick, onError, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
+    const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles(props);
+    const [imageSrc, setImageSrc] = useState('');
+    // Handles image load errors: calls onError callback or falls back to placeholderUrl
+    const handleImageError = useCallback((event) => {
+        const img = event.target;
+        if (onError) {
+            onError(event);
+            return;
+        }
+        if (placeholderUrl && !img.src.endsWith(placeholderUrl)) {
+            img.src = placeholderUrl;
+        }
+    }, [onError, placeholderUrl]);
+    // Syncs imageSrc state with src and placeholderUrl props
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setImageSrc(src || placeholderUrl || '');
+    }, [src, placeholderUrl]);
+    return (_jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
+            `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: styles, onClick: onClick, children: [before, _jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [_jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
+                            `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, "data-original-src": src, style: imageStyles, onError: handleImageError }), overlay, caption, children] }), after] }));
+}));
+export { Image };

package/dist/components/Image/index.js

@@ -0,0 +1 @@
+export { Image } from './Image';

package/dist/components/Input/Input.appearance.js

@@ -0,0 +1,19 @@
+import { inputAppearanceDefault } from './appearance/inputDefault';
+import { inputAppearanceDisabled } from './appearance/inputDisabled';
+import { inputAppearanceError } from './appearance/inputError';
+import { inputAppearanceRequire } from './appearance/inputRequire';
+import { inputAppearanceShape } from './appearance/inputShape';
+import { inputAppearanceSize } from './appearance/inputSize';
+import { inputAppearanceStyle } from './appearance/inputStyle';
+import { inputAppearanceSuccess } from './appearance/inputSuccess';
+const inputAppearance = {
+    ...inputAppearanceDefault,
+    ...inputAppearanceError,
+    ...inputAppearanceShape,
+    ...inputAppearanceSuccess,
+    ...inputAppearanceRequire,
+    ...inputAppearanceDisabled,
+    ...inputAppearanceSize,
+    ...inputAppearanceStyle,
+};
+export { inputAppearance };

package/dist/components/Input/Input.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Input/Input.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { inputAppearance } from './Input.appearance';
+const inputConfig = {
+    appearance: inputAppearance,
+    setAppearance: (appearanceConfig) => {
+        inputConfig.appearance = appearanceConfig;
+    },
+};
+const Input = React.forwardRef(function Input(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const fallbackId = useId();
+    return (_jsx("input", { id: String(id ?? fallbackId), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
+            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-index": index, "data-testid": dataTestId || (name ? `${name}-input` : 'input'), "data-tour": dataTour, disabled: isDisabled, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+});
+export { Input, inputConfig };

package/dist/components/Input/appearance/inputDefault.js

@@ -0,0 +1,21 @@
+const inputAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceTertiary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { inputAppearanceDefault };

package/dist/components/Input/appearance/inputDisabled.js

@@ -0,0 +1,17 @@
+const inputAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        fillHover: 'surfaceDisabled',
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextQuaternary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputAppearanceDisabled };

package/dist/components/Input/appearance/inputError.js

@@ -0,0 +1,18 @@
+const inputAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        borderColorHover: 'errorBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    errorSecondary: {
+        fill: 'errorSecondary',
+        borderColor: 'errorBorderTertiary',
+        borderColorHover: 'errorBorderQuaternary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'errorTextSecondary',
+    },
+};
+export { inputAppearanceError };

package/dist/components/Input/appearance/inputRequire.js

@@ -0,0 +1,19 @@
+const inputAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillHover: 'warningSecondary',
+        borderColor: 'warningBorderQuaternary',
+        borderColorHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputAppearanceRequire };

package/dist/components/Input/appearance/inputShape.js

@@ -0,0 +1,25 @@
+const inputAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { inputAppearanceShape };

package/dist/components/Input/appearance/inputSize.js

@@ -0,0 +1,31 @@
+const inputAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'l',
+    },
+    sizeXL: {
+        size: 'xl',
+        textSize: 'm',
+    },
+    sizeL: {
+        size: 'l',
+        textSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        textSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 's',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 's',
+    },
+};
+export { inputAppearanceSize };

package/dist/components/Input/appearance/inputStyle.js

@@ -0,0 +1,16 @@
+const inputAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+        borderColorHover: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+        borderColorHover: 'none',
+    },
+};
+export { inputAppearanceStyle };

package/dist/components/Input/appearance/inputSuccess.js

@@ -0,0 +1,18 @@
+const inputAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        borderColor: 'successBorderQuaternary',
+        borderColorHover: 'successBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    successSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderQuaternary',
+        caret: 'accentSecondary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputAppearanceSuccess };

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+export { Input, inputConfig } from './Input';
+export { inputAppearance } from './Input.appearance';

package/dist/components/InputNumber/InputNumber.appearance.js

@@ -0,0 +1,11 @@
+import { inputNumberAppearanceShape } from './appearance/InputNumberShape';
+import { inputNumberAppearanceSize } from './appearance/inputNumberSize';
+import { inputNumberAppearanceStyle } from './appearance/inputNumberStyle';
+import { inputNumberAppearanceSurface } from './appearance/inputNumberSurface';
+const inputNumberAppearance = {
+    ...inputNumberAppearanceSurface,
+    ...inputNumberAppearanceShape,
+    ...inputNumberAppearanceSize,
+    ...inputNumberAppearanceStyle,
+};
+export { inputNumberAppearance };

package/dist/components/InputNumber/InputNumber.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/components/InputNumber/InputNumber.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Button } from 'src/components/Button';
+import { inputNumberAppearance } from './InputNumber.appearance';
+const inputNumberConfig = {
+    appearance: inputNumberAppearance,
+    setAppearance: (appearanceConfig) => {
+        inputNumberConfig.appearance = appearanceConfig;
+    },
+};
+const InputNumber = (props) => {
+    const { id, appearance, className, dataTestId, dataTour, type = 'custom', name, min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
+    const [number, setNumber] = useState(value);
+    const handleChangeValue = useCallback((operation) => {
+        const operationType = operation === 'minus' ? -step : step;
+        const nextValue = number + operationType;
+        if (nextValue < min || nextValue > max) {
+            return null;
+        }
+        setNumber(nextValue);
+        onChange?.(nextValue);
+    }, [max, min, number, onChange, step]);
+    const handleInputValue = (event) => {
+        const value = Number(event.target.value);
+        if (value < min || value > max) {
+            return null;
+        }
+        setNumber(value);
+        onChange?.(value);
+    };
+    const appearanceConfig = useAppearanceConfig(appearance, inputNumberConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, iconFill, iconFillHover, iconFillIcon, iconMinus, iconPlus, iconShape, iconSize, inputNumberTextColorClass, inputNumberTextSizeClass, inputNumberTextWeightClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    if (type === 'number') {
+        return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => handleInputValue(event) }));
+    }
+    return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-tour": dataTour, "date-testid": dataTestId, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('minus') }), _jsx("input", { className: clsx(inputNumberTextColorClass &&
+                    `text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
+                    `text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) => handleInputValue(event) }), _jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
+};
+export { InputNumber };

package/dist/components/InputNumber/appearance/InputNumberShape.js

@@ -0,0 +1,25 @@
+const inputNumberAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { inputNumberAppearanceShape };

package/dist/components/InputNumber/appearance/inputNumberSize.js

@@ -0,0 +1,28 @@
+const inputNumberAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        iconSize: '24',
+        inputNumberTextSize: 'xxl',
+    },
+    sizeXL: {
+        size: 'xl',
+        iconSize: '24',
+        inputNumberTextSize: 'xl',
+    },
+    sizeL: {
+        size: 'l',
+        iconSize: '24',
+        inputNumberTextSize: 'l',
+    },
+    sizeM: {
+        size: 'm',
+        iconSize: '24',
+        inputNumberTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        iconSize: '24',
+        inputNumberTextSize: 's',
+    },
+};
+export { inputNumberAppearanceSize };

package/dist/components/InputNumber/appearance/inputNumberStyle.js

@@ -0,0 +1,16 @@
+const inputNumberAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { inputNumberAppearanceStyle };

package/dist/components/InputNumber/appearance/inputNumberSurface.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const inputNumberAppearanceSurface = {
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        labelTextWeight: '400',
+        borderColor: 'surfaceBorderQuaternary',
+        borderHover: 'surfaceBorderHoverQuaternary',
+        iconFill: 'surfaceSecondary',
+        iconFillHover: 'surfaceHoverSecondary',
+        iconFillIcon: 'surfaceItemQuaternary',
+        iconMinus: icons24.Form.Minus,
+        iconPlus: icons24.Form.Plus,
+        inputNumberTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { inputNumberAppearanceSurface };

package/dist/components/InputNumber/index.js

@@ -0,0 +1,2 @@
+export { InputNumber } from './InputNumber';
+export { inputNumberAppearance } from './InputNumber.appearance';

package/dist/components/InputPassword/InputPassword.appearance.js

@@ -0,0 +1,19 @@
+import { inputPasswordAppearanceDefault } from './appearance/inputPasswordDefault';
+import { inputPasswordAppearanceDisabled } from './appearance/inputPasswordDisabled';
+import { inputPasswordAppearanceError } from './appearance/inputPasswordError';
+import { inputPasswordAppearanceRequire } from './appearance/inputPasswordRequire';
+import { inputPasswordAppearanceShape } from './appearance/inputPasswordShape';
+import { inputPasswordAppearanceSize } from './appearance/inputPasswordSize';
+import { inputPasswordAppearanceStyle } from './appearance/inputPasswordStyle';
+import { inputPasswordAppearanceSuccess } from './appearance/inputPasswordSuccess';
+const inputPasswordAppearance = {
+    ...inputPasswordAppearanceSize,
+    ...inputPasswordAppearanceDisabled,
+    ...inputPasswordAppearanceRequire,
+    ...inputPasswordAppearanceStyle,
+    ...inputPasswordAppearanceError,
+    ...inputPasswordAppearanceDefault,
+    ...inputPasswordAppearanceSuccess,
+    ...inputPasswordAppearanceShape,
+};
+export { inputPasswordAppearance };

package/dist/components/InputPassword/InputPassword.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/InputPassword/InputPassword.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Icon } from 'src/components/Icon';
+import { inputPasswordAppearance } from './InputPassword.appearance';
+const inputPasswordConfig = {
+    appearance: inputPasswordAppearance,
+    setAppearance: (appearanceConfig) => {
+        inputPasswordConfig.appearance = appearanceConfig;
+    },
+};
+function InputPassword(props) {
+    const { id, appearance, className, dataTestId, dataTour, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const [isRevealed, setIsRevealed] = useState(false);
+    const inputType = useMemo(() => {
+        return isRevealed ? 'text' : 'password';
+    }, [isRevealed]);
+    const onClickIconReveal = useCallback((event) => {
+        event?.preventDefault();
+        setIsRevealed((prev) => !prev);
+    }, []);
+    const appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (_jsxs("div", { className: "input-password", children: [_jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+                    `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
+                    `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, "data-testid": dataTestId || (name ? `${name}-input-password` : 'input-password'), "data-tour": dataTour, "date-testid": dataTestId, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
+}
+export { InputPassword, inputPasswordConfig };

package/dist/components/InputPassword/appearance/inputPasswordDefault.js

@@ -0,0 +1,24 @@
+import { icons24 } from '@itcase/icons/default';
+const inputPasswordAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'extraItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
+        caret: 'extraItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+export { inputPasswordAppearanceDefault };

package/dist/components/InputPassword/appearance/inputPasswordDisabled.js

@@ -0,0 +1,21 @@
+import { icons24 } from '@itcase/icons/default';
+const inputPasswordAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        borderColor: 'errorBorderQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputPasswordAppearanceDisabled };

package/dist/components/InputPassword/appearance/inputPasswordError.js

@@ -0,0 +1,21 @@
+import { icons24 } from '@itcase/icons/default';
+const inputPasswordAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    errorSecondary: {
+        fill: 'errorSecondary',
+        borderColor: 'errorBorderTertiary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'errorTextSecondary',
+    },
+};
+export { inputPasswordAppearanceError };

package/dist/components/InputPassword/appearance/inputPasswordRequire.js

@@ -0,0 +1,21 @@
+import { icons24 } from '@itcase/icons/default';
+const inputPasswordAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputPasswordAppearanceRequire };

package/dist/components/InputPassword/appearance/inputPasswordShape.js

@@ -0,0 +1,25 @@
+const inputPasswordAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { inputPasswordAppearanceShape };

package/dist/components/InputPassword/appearance/inputPasswordSize.js

@@ -0,0 +1,38 @@
+const inputPasswordAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'l',
+        iconSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        textSize: 's',
+        iconSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        textSize: 's',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        textSize: 'm',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+        iconSize: '24',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 's',
+        iconSize: '24',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 's',
+        iconSize: '24',
+    },
+};
+export { inputPasswordAppearanceSize };