@itcase/ui 1.2.35 → 1.3.1

package/dist/Group-D95Sf0X0.js

@@ -1,136 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-
-var groupAppearance = {
-    dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
-    var contentAlignClass = useDeviceTargetClass(props, {
-        prefix: 'group_content-align_',
-        propsKey: 'contentAlign',
-    });
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var justifyContentClass = useDeviceTargetClass(props, {
-        prefix: 'justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var stackingClass = useDeviceTargetClass(props, {
-        prefix: 'group_stacking_',
-        propsKey: 'stacking',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'group_direction_',
-        propsKey: 'direction',
-    });
-    var wrapClass = useDeviceTargetClass(props, {
-        prefix: 'group_wrap_',
-        propsKey: 'wrap',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'group_shape_',
-        propsKey: 'shape',
-    });
-    var columnsClass = useDeviceTargetClass(props, {
-        prefix: 'group_columns_',
-        propsKey: 'columns',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var growClass = useDeviceTargetClass(props, {
-        prefix: 'flex-grow_',
-        propsKey: 'flexGrow',
-    });
-    var elevationClass = useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_',
-        propsKey: 'textColor',
-    });
-    var textColorActiveClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_active_',
-        propsKey: 'textColorActive',
-    });
-    var textColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_hover_',
-        propsKey: 'textColorHover',
-    });
-    var iconFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'group_icon_fill_hover_',
-        propsKey: 'iconFillHover',
-    });
-    // @ts-expect-error
-    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    // prettier-ignore
-    var appearanceConfig = (appearance && groupConfig.appearance && groupConfig.appearance[appearance]);
-    return (jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
-                "group_direction_".concat(appearanceConfig.direction)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, iconFillHoverClass, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
-                "border-width_".concat(appearanceConfig.borderWidth)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass, onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-});
-
-export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/Icon-21rsw8YW.js

@@ -1,119 +0,0 @@
-import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import SVG from 'react-inlinesvg';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { T as Tooltip } from './Tooltip-BsMYxi_I.js';
-
-var iconAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        fillSize: 40,
-        iconFill: 'accentItemPrimary',
-        iconSize: 24,
-        imageSrc: 'img/filter.svg',
-    },
-};
-
-var iconConfig = {
-    appearance: iconAppearance,
-    setAppearance: function (newComponent) {
-        iconConfig.appearance = newComponent;
-    },
-};
-var Icon = React.forwardRef(function Icon(props, ref) {
-    // TODO: Tooltip doesn't work that anymore
-    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
-    var ImageComponent = useMemo(function () {
-        if (SvgImage) {
-            var sizes = {};
-            if (width) {
-                sizes.width = width;
-            }
-            if (height) {
-                sizes.height = height;
-            }
-            return jsx(SvgImage, __assign({}, sizes));
-        }
-        if (imageSrc) {
-            if (imageSrc.endsWith('.svg')) {
-                return jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
-            }
-            return jsx("img", { src: imageSrc });
-        }
-        return null;
-    }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var fillSizeClass = useDeviceTargetClass(props, {
-        prefix: 'icon_fill_size_',
-        propsKey: 'fillSize',
-    });
-    var iconFillClass = useDeviceTargetClass(props, {
-        prefix: 'icon_fill_',
-        propsKey: 'iconFill',
-    });
-    var iconFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'icon_fill_hover_',
-        propsKey: 'iconFillHover',
-    });
-    var iconFillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'icon_fill_disabled_',
-        propsKey: 'iconFillDisabled',
-    });
-    var iconSizeClass = useDeviceTargetClass(props, {
-        prefix: 'icon_size_',
-        propsKey: 'iconSize',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'icon_shape_',
-        propsKey: 'shape',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'borderColorHover',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var alignmentClass = useDeviceTargetClass(props, {
-        prefix: 'alignment_',
-        propsKey: 'alignment',
-    });
-    // @ts-expect-error
-    var iconStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', onClick && cursorClass), ref: ref, "data-tour": dataTour, id: id, 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), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
-});
-var removeFillStroke = function (code) {
-    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
-};
-
-export { Icon as I, iconAppearance as a, iconConfig as i };

package/dist/Icon-gTZ0QO8I.js

@@ -1,123 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var SVG = require('react-inlinesvg');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Link = require('./Link-CqWzwh8V.js');
-var Tooltip = require('./Tooltip-CUL79Nsx.js');
-
-var iconAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        fillSize: 40,
-        iconFill: 'accentItemPrimary',
-        iconSize: 24,
-        imageSrc: 'img/filter.svg',
-    },
-};
-
-var iconConfig = {
-    appearance: iconAppearance,
-    setAppearance: function (newComponent) {
-        iconConfig.appearance = newComponent;
-    },
-};
-var Icon = React.forwardRef(function Icon(props, ref) {
-    // TODO: Tooltip doesn't work that anymore
-    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
-    var ImageComponent = React.useMemo(function () {
-        if (SvgImage) {
-            var sizes = {};
-            if (width) {
-                sizes.width = width;
-            }
-            if (height) {
-                sizes.height = height;
-            }
-            return jsxRuntime.jsx(SvgImage, tslib_es6.__assign({}, sizes));
-        }
-        if (imageSrc) {
-            if (imageSrc.endsWith('.svg')) {
-                return jsxRuntime.jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
-            }
-            return jsxRuntime.jsx("img", { src: imageSrc });
-        }
-        return null;
-    }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_fill_size_',
-        propsKey: 'fillSize',
-    });
-    var iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_fill_',
-        propsKey: 'iconFill',
-    });
-    var iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_fill_hover_',
-        propsKey: 'iconFillHover',
-    });
-    var iconFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_fill_disabled_',
-        propsKey: 'iconFillDisabled',
-    });
-    var iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_size_',
-        propsKey: 'iconSize',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_shape_',
-        propsKey: 'shape',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'borderColorHover',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'alignment_',
-        propsKey: 'alignment',
-    });
-    // @ts-expect-error
-    var iconStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', onClick && cursorClass), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
-});
-var removeFillStroke = function (code) {
-    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
-};
-
-exports.Icon = Icon;
-exports.iconAppearance = iconAppearance;
-exports.iconConfig = iconConfig;

package/dist/Image-8t6PvsaZ.js

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-
-function Image(props) {
-    var after = props.after, alt = props.alt, before = props.before, caption = props.caption, children = props.children, className = props.className, imageWrapperClassName = props.imageWrapperClassName, imageClassName = props.imageClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var cursorClass = useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
-    var horizontalAlignClass = useDeviceTargetClass(props, {
-        prefix: 'image_horizontal-align_',
-        propsKey: 'horizontalAlign',
-    });
-    var verticalAlignClass = useDeviceTargetClass(props, {
-        prefix: 'image_vertical-align_',
-        propsKey: 'verticalContentAlign',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'image_shape_',
-        propsKey: 'shape',
-    });
-    var resizeModeClass = useDeviceTargetClass(props, {
-        prefix: 'image_resize-mode_',
-        propsKey: 'resizeMode',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var imageWidthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'imageWidth',
-    });
-    var imageHeightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'imageHeight',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorImageClass = useDeviceTargetClass(props, {
-        prefix: 'border-color-image_',
-        propsKey: 'borderColorImage',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    // @ts-expect-error
-    var _a = useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper, imageStyles = _a.image;
-    return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass), onClick: onClick, style: styles, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { alt: alt, src: src, style: imageStyles, title: title, className: clsx('image__item', imageWidthClass, imageHeightClass, imageClassName, borderColorClass, borderColorImageClass), onError: onError }), overlay, caption, children] }), after] }));
-}
-
-export { Image as I };

package/dist/Image-DrUlRMHa.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-
-function Image(props) {
-    var after = props.after, alt = props.alt, before = props.before, caption = props.caption, children = props.children, className = props.className, imageWrapperClassName = props.imageWrapperClassName, imageClassName = props.imageClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
-    var horizontalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'image_horizontal-align_',
-        propsKey: 'horizontalAlign',
-    });
-    var verticalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'image_vertical-align_',
-        propsKey: 'verticalContentAlign',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'image_shape_',
-        propsKey: 'shape',
-    });
-    var resizeModeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'image_resize-mode_',
-        propsKey: 'resizeMode',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'imageWidth',
-    });
-    var imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'imageHeight',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color-image_',
-        propsKey: 'borderColorImage',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    // @ts-expect-error
-    var _a = useStyles.useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper, imageStyles = _a.image;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass), onClick: onClick, style: styles, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { alt: alt, src: src, style: imageStyles, title: title, className: clsx('image__item', imageWidthClass, imageHeightClass, imageClassName, borderColorClass, borderColorImageClass), onError: onError }), overlay, caption, children] }), after] }));
-}
-
-exports.Image = Image;