@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/{Divider-CIYsHYud.js → Divider-D92wY8Fn.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
@@ -47,5 +47,8 @@ function Divider(props) {
     var hrStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxRuntimeExports.jsx("hr", { className: clsx__default.default(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
 }
+Divider.defaultProps = {
+    size: 'xs',
+};
 
 exports.Divider = Divider;

package/dist/cjs/{Dot-vDSigHDs.js → Dot-CKWexdtn.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');

package/dist/cjs/Drawer-BGZBaR2Q.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var getDirectionStyle = function getDirectionStyle(dir, size) {
+  var directionStyle = {
+    left: {
+      top: 0,
+      left: 0,
+      transform: 'translate3d(-100%, 0, 0)',
+      width: size,
+      height: '100vh'
+    },
+    right: {
+      top: 0,
+      right: 0,
+      transform: 'translate3d(100%, 0, 0)',
+      width: size,
+      height: '100vh'
+    },
+    bottom: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      transform: 'translate3d(0, 100%, 0)',
+      width: '100%',
+      height: size
+    },
+    top: {
+      left: 0,
+      right: 0,
+      top: 0,
+      transform: 'translate3d(0, -100%, 0)',
+      width: '100%',
+      height: size
+    }
+  };
+  return directionStyle[dir];
+};
+
+var EZDrawer = function EZDrawer(props) {
+  var open = props.open,
+      _props$onClose = props.onClose,
+      onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
+      children = props.children,
+      style = props.style,
+      _props$enableOverlay = props.enableOverlay,
+      enableOverlay = _props$enableOverlay === void 0 ? true : _props$enableOverlay,
+      _props$overlayColor = props.overlayColor,
+      overlayColor = _props$overlayColor === void 0 ? '#000' : _props$overlayColor,
+      _props$overlayOpacity = props.overlayOpacity,
+      overlayOpacity = _props$overlayOpacity === void 0 ? 0.4 : _props$overlayOpacity,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 500 : _props$duration,
+      direction = props.direction,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 250 : _props$size,
+      className = props.className,
+      customIdSuffix = props.customIdSuffix,
+      _props$lockBackground = props.lockBackgroundScroll,
+      lockBackgroundScroll = _props$lockBackground === void 0 ? false : _props$lockBackground,
+      _props$overlayClassNa = props.overlayClassName,
+      overlayClassName = _props$overlayClassNa === void 0 ? '' : _props$overlayClassNa;
+  var bodyRef = React.useRef(null);
+  React.useEffect(function () {
+    var updatePageScroll = function updatePageScroll() {
+      bodyRef.current = window.document.querySelector('body');
+
+      if (bodyRef.current && lockBackgroundScroll) {
+        bodyRef.current.style.overflow = open ? 'hidden' : '';
+      }
+    };
+
+    updatePageScroll();
+  }, [open]);
+  var idSuffix = React.useMemo(function () {
+    return customIdSuffix || (Math.random() + 1).toString(36).substring(7);
+  }, [customIdSuffix]);
+  var overlayStyles = {
+    backgroundColor: overlayColor.toString(),
+    opacity: overlayOpacity,
+    zIndex: zIndex
+  };
+
+  var drawerStyles = _extends({
+    zIndex: zIndex + 1,
+    transitionDuration: duration + "ms"
+  }, getDirectionStyle(direction, size), style);
+
+  return React__default.default.createElement("div", {
+    id: 'EZDrawer' + idSuffix,
+    className: 'EZDrawer'
+  }, React__default.default.createElement("input", {
+    type: 'checkbox',
+    id: 'EZDrawer__checkbox' + idSuffix,
+    className: 'EZDrawer__checkbox',
+    onChange: onClose,
+    checked: open
+  }), React__default.default.createElement("nav", {
+    role: 'navigation',
+    id: 'EZDrawer__container' + idSuffix,
+    style: drawerStyles,
+    className: 'EZDrawer__container ' + className
+  }, children), enableOverlay && React__default.default.createElement("label", {
+    htmlFor: 'EZDrawer__checkbox' + idSuffix,
+    id: 'EZDrawer__overlay' + idSuffix,
+    className: 'EZDrawer__overlay ' + overlayClassName,
+    style: overlayStyles
+  }));
+};
+
+function Drawer(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, dataTour = props.dataTour, direction = props.direction, enableOverlay = props.enableOverlay, size = props.size, type = props.type, isOpenModal = props.isOpenModal, closeModal = props.closeModal;
+    return (jsxRuntime.jsxRuntimeExports.jsxs(EZDrawer, { className: clsx__default.default('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', lockBackgroundScroll: false, 
+        // @ts-expect-error
+        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, enableOverlay: enableOverlay, children: [before && jsxRuntime.jsxRuntimeExports.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsxRuntimeExports.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsxRuntimeExports.jsx("div", { className: "drawer__after", children: after })] }));
+}
+
+exports.Drawer = Drawer;

package/dist/cjs/DropdownItem-bjpmcFH1.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Divider = require('./Divider-D92wY8Fn.js');
+var Link = require('./Link-3qPujNn9.js');
+var Text = require('./Text-C8vlKWNN.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Dropdown(props) {
+    var after = props.after, before = props.before, animationClose = props.animationClose, animationOpen = props.animationOpen, children = props.children, className = props.className, set = props.set, isOpen = props.isOpen, setIsOpen = props.setIsOpen;
+    var dropdownRef = React.useRef(null);
+    // const [isOpen, setIsOpen] = useState(false)
+    var _a = React.useState({
+        className: '',
+    }), animationState = _a[0], setAnimationState = _a[1];
+    var onAnimationEnd = React.useCallback(function () {
+        // When component is change his visibility(display) in DOM,
+        // animation of close can run unnecessary on showing element.
+        // const dropdownElement = dropdownRef.current
+        setAnimationState(function (prevState) { return ({
+            className: isOpen ? prevState.className : '',
+        }); });
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (animationOpen && animationClose) {
+            setAnimationState(function () { return ({
+                className: isOpen ? animationOpen : animationClose,
+            }); });
+        }
+    }, [isOpen]);
+    // Close dropdown by click outside
+    React.useEffect(function () {
+        // Add a handler to keep track of the click target.
+        function onClickWindow(event) {
+            var dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                // Is event target inside of dropdown element
+                var isContainsTarget = dropdownElement.contains(event.target);
+                // Is dropdown element has "open" class
+                var hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    // Trigger close event with animation
+                    // dropdownElement.click() - trigger "onClickWindow" again
+                    setIsOpen(false);
+                }
+            }
+        }
+        // Add event listener for current dropdown on first render
+        window.addEventListener('click', onClickWindow);
+        return function () {
+            // Remove event listener for current dropdown on unmount
+            window.removeEventListener('click', onClickWindow);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown_shape_',
+        propsKey: 'shape',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'alignment_',
+        propsKey: 'alignment',
+    });
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'dropdown', alignmentClass, set && "dropdown_set_".concat(set), shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                onAnimationEnd: onAnimationEnd, children: children })), after] }));
+}
+Dropdown.defaultProps = {
+    animationOpen: 'dropdown_animation_open',
+    animationClose: 'dropdown_animation_close',
+    set: 'normal',
+};
+
+function DropdownItem(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, isActive = props.isActive, isHover = props.isHover, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'linkFill',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var dropdownItem = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxRuntimeExports.jsx(Link.Link, { href: link || href, className: clsx__default.default('dropdown__item-link', alignDirectionClass, alignClass), underline: underline, fill: linkFill, target: target, rel: rel, children: jsxRuntime.jsxRuntimeExports.jsxs(React__default.default.Fragment, { children: [before, children || (jsxRuntime.jsxRuntimeExports.jsxs(React__default.default.Fragment, { children: [label && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: isActive ? labelTextColorActive : undefined, textColorHover: labelTextColorHover, textColorGradient: labelTextGradient, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize, width: "fill" }))] }));
+}
+DropdownItem.defaultProps = {
+    size: 'l',
+    LinkComponent: 'a',
+    width: 'fixed',
+};
+
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;

package/dist/cjs/{FlexItem-BnORv6q3.js → FlexItem-2KlvlTJY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
@@ -51,7 +51,7 @@ function Flex(props) {
         prefix: 'position_',
         propsKey: 'position',
     });
-    var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
     });
@@ -61,7 +61,7 @@ function Flex(props) {
     });
     // @ts-expect-error
     var _b = useStyles.useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
-    return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_".concat(type), wrapClass), id: id, style: flexStyles, onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderColorClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_".concat(type), wrapClass), id: id, style: flexStyles, onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 Flex.defaultProps = {
     tag: 'div',

package/dist/cjs/{GridRow-mzs0CkNG.js → GridRow-OxLsh_2P.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');

package/dist/cjs/{Group-4zWTDvKx.js → Group-C9BxTKs-.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
@@ -91,7 +92,7 @@ function Group(props) {
     });
     // @ts-expect-error
     var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    var appearanceConfig = appearance && groupConfig.appearance && groupConfig.appearance[appearance];
+    var appearanceConfig = React.useMemo(function () { return appearance && groupConfig.appearance && groupConfig.appearance[appearance]; }, [appearance, groupConfig]);
     return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
                 "group_direction_".concat(appearanceConfig.direction)

package/dist/cjs/{Icon-UBahY607.js → Icon-DzJtiBBk.js}

@@ -1,13 +1,14 @@
 'use strict';
 
-var Link = require('./Link-BoShjCEw.js');
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var _tslib = require('./_tslib-CKiUdo7p.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
 var useStyles = require('./hooks/useStyles.js');
-var index = require('./components/Tooltip.js');
+var Link = require('./Link-3qPujNn9.js');
+var Tooltip = require('./Tooltip-CnnungCh.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -66,18 +67,6 @@ var Icon = React__default.default.forwardRef(function Icon(props, ref) {
         prefix: 'icon_fill_disabled_',
         propsKey: 'iconFillDisabled',
     });
-    var iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_stroke_',
-        propsKey: 'iconStroke',
-    });
-    var iconStrokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_stroke_hover_',
-        propsKey: 'iconStrokeHover',
-    });
-    var iconStrokeDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'icon_stroke_disabled_',
-        propsKey: 'iconStrokeDisabled',
-    });
     var iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'icon_size_',
         propsKey: 'iconSize',
@@ -110,7 +99,7 @@ var Icon = React__default.default.forwardRef(function Icon(props, ref) {
     var iconStyles = useStyles.useStyles(props).styles;
     var ImageComponent = React.useMemo(function () {
         if (SvgImage) {
-            return jsxRuntime.jsxRuntimeExports.jsx(SvgImage, Link.__assign({}, svgSizes));
+            return jsxRuntime.jsxRuntimeExports.jsx(SvgImage, _tslib.__assign({}, svgSizes));
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -120,11 +109,7 @@ var Icon = React__default.default.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, svgSizes, imageSrc]);
-    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), "data-tour": dataTour, id: String(id), ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxRuntime.jsxRuntimeExports.jsxs(Link.LinkWrapper, { className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsxRuntime.jsxRuntimeExports.jsx(index.Tooltip
-                // @ts-expect-error
-                , { 
-                    // @ts-expect-error
-                    appearance: tooltipAppearance, className: clsx__default.default(className, 'icon__tooltip', alignmentClass), text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), "data-tour": dataTour, id: String(id), ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxRuntime.jsxRuntimeExports.jsxs(Link.LinkWrapper, { className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { appearance: tooltipAppearance, className: clsx__default.default(className, 'icon__tooltip', alignmentClass), text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
 });
 Icon.defaultProps = {
     LinkComponent: 'a',

package/dist/cjs/Image-CCx6QWZj.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+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.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(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.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsxRuntimeExports.jsx("img", { alt: alt, src: src, style: imageStyles, title: title, className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imageClassName, borderColorClass, borderColorImageClass), onError: onError }), overlay, caption, children] }), after] }));
+}
+
+exports.Image = Image;