@itcase/ui 1.9.56 → 1.9.57

package/dist/components/HeroTitle/HeroTitle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } 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 { heroTitleAppearance } from './HeroTitle.appearance';
+const heroTitleConfig = {
+    appearance: heroTitleAppearance,
+    setAppearance: (appearanceConfig) => {
+        heroTitleConfig.appearance = appearanceConfig;
+    },
+};
+function HeroTitle(props) {
+    const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, tag = 'span', before, after, isDisabled, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, heroTitleConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, size, fillClass, textAlignClass, textColorActiveClass, textColorClass, textColorGradientClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, typeClass, widthClass, wrapperDirectionClass, } = propsGenerator;
+    const { styles: heroTitleStyles, wrapper: heroTitleWrapperStyles } = useStyles(props);
+    const Tag = useMemo(() => {
+        if (tag) {
+            return tag;
+        }
+        return size ? size : 'span';
+    }, [size, tag]);
+    return (_jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && `fill_${fillClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `hero-title_size_${size}`, directionClass && `hero-title_direction_${directionClass}`, 'text', textColorClass && `text-color_${textColorClass}`, textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, typeClass && `hero-title_type_${typeClass}`, textColorGradientClass && `text-gradient_${textColorGradientClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, isSkeleton && 'hero-title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, _jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass &&
+                    `hero-title-direction_${wrapperDirectionClass}`, 'hero-title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: heroTitleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
+}
+export { HeroTitle, heroTitleConfig };

package/dist/components/HeroTitle/appearance/heroTitleSize.js

@@ -0,0 +1,21 @@
+const heroTitleAppearanceSize = {
+    sizeH1: {
+        size: 'h1',
+    },
+    sizeH2: {
+        size: 'h2',
+    },
+    sizeH3: {
+        size: 'h3',
+    },
+    sizeH4: {
+        size: 'h4',
+    },
+    sizeH5: {
+        size: 'h5',
+    },
+    sizeH6: {
+        size: 'h6',
+    },
+};
+export { heroTitleAppearanceSize };

package/dist/components/HeroTitle/index.js

@@ -0,0 +1,2 @@
+export { HeroTitle, heroTitleConfig } from './HeroTitle';
+export { heroTitleAppearance } from './HeroTitle.appearance';

package/dist/components/Icon/Icon.appearance.js

@@ -0,0 +1,29 @@
+import { iconAppearanceAccent } from './appearance/iconAccent';
+import { iconAppearanceDanger } from './appearance/iconDanger';
+import { iconAppearanceDisabled } from './appearance/iconDisabled';
+import { iconAppearanceError } from './appearance/iconError';
+import { iconAppearanceExtra } from './appearance/iconExtra';
+import { iconAppearanceInfo } from './appearance/iconInfo';
+import { iconAppearanceShape } from './appearance/iconShape';
+import { iconAppearanceSize } from './appearance/iconSize';
+import { iconAppearanceSpecial } from './appearance/iconSpecial';
+import { iconAppearanceStyle } from './appearance/iconStyle';
+import { iconAppearanceSuccess } from './appearance/iconSuccess';
+import { iconAppearanceSurface } from './appearance/iconSurface';
+import { iconAppearanceWarning } from './appearance/iconWarning';
+const iconAppearance = {
+    ...iconAppearanceDisabled,
+    ...iconAppearanceSize,
+    ...iconAppearanceStyle,
+    ...iconAppearanceAccent,
+    ...iconAppearanceShape,
+    ...iconAppearanceDanger,
+    ...iconAppearanceError,
+    ...iconAppearanceInfo,
+    ...iconAppearanceSpecial,
+    ...iconAppearanceExtra,
+    ...iconAppearanceSuccess,
+    ...iconAppearanceSurface,
+    ...iconAppearanceWarning,
+};
+export { iconAppearance };

package/dist/components/Icon/Icon.interface.js

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

package/dist/components/Icon/Icon.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import SVG from 'react-inlinesvg';
+import { Badge } from 'src/components/Badge';
+import { LinkWrapper } from 'src/components/Link';
+import { Tooltip } from 'src/components/Tooltip';
+import { urlWithAssetPrefix } from 'src/hoc/urlWithAssetPrefix';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { mergeAppearanceKeys } from 'src/utils';
+import { iconAppearance } from './Icon.appearance';
+const iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: (appearanceConfig) => {
+        iconConfig.appearance = appearanceConfig;
+    },
+};
+const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
+    const ImageComponent = useMemo(() => {
+        if (SvgImage) {
+            const SvgComponent = SvgImage;
+            const sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return _jsx(SvgComponent, { ...sizes });
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                if (saveFillStroke) {
+                    return _jsx(SVG, { src: imageSrc });
+                }
+                return _jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
+            }
+            return _jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
+    const appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
+    const { styles: iconStyles } = useStyles(props);
+    return (_jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass &&
+                `fill_active_hover_${fillActiveHoverClass}`, fillSizeClass && `icon_fill_size_${fillSizeClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, !isActive
+            ? iconFillClass && `icon_fill_${iconFillClass}`
+            : iconFillActiveClass && `icon_fill_active_${iconFillActiveClass}`, !isActive
+            ? iconFillHoverClass && `icon_fill_hover_${iconFillHoverClass}`
+            : iconFillActiveHoverClass &&
+                `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
+            iconFillDisabledClass &&
+            `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, _jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (_jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
+const removeFillStroke = (code) => {
+    return code
+        .replace(/fill=".*?"/g, 'fill=""')
+        .replace(/stroke=".*?"/g, 'stroke=""');
+};
+export { Icon, iconConfig };

package/dist/components/Icon/appearance/iconAccent.js

@@ -0,0 +1,16 @@
+const iconAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+};
+export { iconAppearanceAccent };

package/dist/components/Icon/appearance/iconDanger.js

@@ -0,0 +1,10 @@
+const iconAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+        borderColor: 'dangerBorderSecondary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+export { iconAppearanceDanger };

package/dist/components/Icon/appearance/iconDisabled.js

@@ -0,0 +1,9 @@
+const iconAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'surfaceItemQuaternary',
+    },
+};
+export { iconAppearanceDisabled };

package/dist/components/Icon/appearance/iconError.js

@@ -0,0 +1,10 @@
+const iconAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        borderColor: 'errorBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+export { iconAppearanceError };

package/dist/components/Icon/appearance/iconExtra.js

@@ -0,0 +1,10 @@
+const iconAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        borderColor: 'extraBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+export { iconAppearanceExtra };

package/dist/components/Icon/appearance/iconInfo.js

@@ -0,0 +1,15 @@
+const iconAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        borderColor: 'infoBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconFill: 'infoItemSecondary',
+    },
+};
+export { iconAppearanceInfo };

package/dist/components/Icon/appearance/iconShape.js

@@ -0,0 +1,25 @@
+const iconAppearanceShape = {
+    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 { iconAppearanceShape };

package/dist/components/Icon/appearance/iconSize.js

@@ -0,0 +1,171 @@
+const iconAppearanceSize = {
+    size12_12: {
+        fillSize: '12',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size14_12: {
+        fillSize: '14',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size14_14: {
+        fillSize: '14',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size16_12: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size16_14: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size16_16: {
+        fillSize: '16',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size20_12: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size20_14: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size20_16: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size20_20: {
+        fillSize: '20',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size24_12: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size24_14: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size24_16: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size24_20: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size24_24: {
+        fillSize: '24',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size32_12: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size32_14: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size32_16: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size32_20: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size32_24: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size32_32: {
+        fillSize: '32',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '32',
+    },
+    size40_12: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '12',
+    },
+    size40_14: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '14',
+    },
+    size40_16: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '16',
+    },
+    size40_20: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '20',
+    },
+    size40_24: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '24',
+    },
+    size40_32: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '32',
+    },
+    size40_40: {
+        fillSize: '40',
+        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
+        iconSize: '40',
+    },
+};
+export { iconAppearanceSize };

package/dist/components/Icon/appearance/iconSpecial.js

@@ -0,0 +1,10 @@
+const iconAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        borderColor: 'specialBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+export { iconAppearanceSpecial };

package/dist/components/Icon/appearance/iconStyle.js

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

package/dist/components/Icon/appearance/iconSuccess.js

@@ -0,0 +1,10 @@
+const iconAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'successItemPrimary',
+    },
+};
+export { iconAppearanceSuccess };

package/dist/components/Icon/appearance/iconSurface.js

@@ -0,0 +1,28 @@
+const iconAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        badgeAppearance: 'accentPrimary solid rounded',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+export { iconAppearanceSurface };

package/dist/components/Icon/appearance/iconWarning.js

@@ -0,0 +1,10 @@
+const iconAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        borderColor: 'warningBorderSecondary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'warningItemPrimary',
+    },
+};
+export { iconAppearanceWarning };

package/dist/components/Icon/index.js

@@ -0,0 +1,2 @@
+export { Icon, iconConfig } from './Icon';
+export { iconAppearance } from './Icon.appearance';

package/dist/components/Image/Image.interface.js

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

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