@itcase/ui 1.9.56 → 1.9.57

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 };

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

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

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

@@ -0,0 +1,21 @@
+import { icons24 } from '@itcase/icons/default';
+const inputPasswordAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        borderColor: 'successBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    successSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        iconFill: 'surfaceItemQuaternary',
+        iconRevealableHide: icons24.View.HideValue,
+        iconRevealableShow: icons24.View.ShowValue,
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+export { inputPasswordAppearanceSuccess };

package/dist/components/InputPassword/index.js

@@ -0,0 +1,2 @@
+export { inputPasswordAppearance } from './InputPassword.appearance';
+export { InputPassword, inputPasswordConfig } from './InputPassword';

package/dist/components/Label/Label.appearance.js

@@ -0,0 +1,31 @@
+import { labelAppearanceAccent } from './appearance/labelAccent';
+import { labelAppearanceDanger } from './appearance/labelDanger';
+import { labelAppearanceDisabled } from './appearance/labelDisabled';
+import { labelAppearanceError } from './appearance/labelError';
+import { labelAppearanceExtra } from './appearance/labelExtra';
+import { labelAppearanceGradient } from './appearance/labelGradient';
+import { labelAppearanceInfo } from './appearance/labelInfo';
+import { labelAppearanceShape } from './appearance/labelShape';
+import { labelAppearanceSize } from './appearance/labelSize';
+import { labelAppearanceSpecial } from './appearance/labelSpecial';
+import { labelAppearanceStyle } from './appearance/labelStyle';
+import { labelAppearanceSuccess } from './appearance/labelSuccess';
+import { labelAppearanceSurface } from './appearance/labelSurface';
+import { labelAppearanceWarning } from './appearance/labelWarning';
+const labelAppearance = {
+    ...labelAppearanceDisabled,
+    ...labelAppearanceShape,
+    ...labelAppearanceSize,
+    ...labelAppearanceStyle,
+    ...labelAppearanceGradient,
+    ...labelAppearanceAccent,
+    ...labelAppearanceDanger,
+    ...labelAppearanceError,
+    ...labelAppearanceInfo,
+    ...labelAppearanceSpecial,
+    ...labelAppearanceExtra,
+    ...labelAppearanceSuccess,
+    ...labelAppearanceSurface,
+    ...labelAppearanceWarning,
+};
+export { labelAppearance };

package/dist/components/Label/Label.interface.js

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

package/dist/components/Label/Label.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { Tooltip } from 'src/components/Tooltip';
+import { labelAppearance } from './Label.appearance';
+const labelConfig = {
+    appearance: labelAppearance,
+    setAppearance: (appearanceConfig) => {
+        labelConfig.appearance = appearanceConfig;
+    },
+};
+function Label(props) {
+    const { appearance, className, dataTestId, dataTour, label, cursor, tooltipContent, before, after, isDisabled, isSkeleton, onClick, children, } = props;
+    const tooltipRef = useRef(null);
+    const onMouseEnterLabel = useCallback(() => {
+        tooltipRef.current?.openTooltip();
+    }, []);
+    const onMouseLeaveLabel = useCallback(() => {
+        tooltipRef.current?.closeTooltip();
+    }, []);
+    const appearanceConfig = useAppearanceConfig(appearance, labelConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
+    const { styles: labelStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), _jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (_jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (_jsx("div", { className: "label__text", children: label })), children, tooltipContent && (_jsx(Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
+}
+export { Label, labelConfig };