@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/FlexItem-BnORv6q3.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.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 Flex(props) {
+    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, onClick = props.onClick;
+    var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_wrap_',
+        propsKey: 'wrap',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_direction_',
+        propsKey: 'direction',
+    });
+    var flowClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_flow_',
+        propsKey: 'flow',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @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 }) }));
+}
+Flex.defaultProps = {
+    tag: 'div',
+};
+
+function FlexItem(props) {
+    var children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor;
+    var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_align-self_',
+        propsKey: 'alignSelf',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_direction_',
+        propsKey: 'direction',
+    });
+    var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_grow_',
+        propsKey: 'grow',
+    });
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_shape_',
+        propsKey: 'shape',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'resize-horizontal_',
+        propsKey: 'width',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex__item_wrap_',
+        propsKey: 'wrap',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var flexItemStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, fillHoverClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass), htmlFor: htmlFor, style: flexItemStyles, children: children }));
+}
+FlexItem.defaultProps = {
+    tag: 'div',
+};
+
+exports.Flex = Flex;
+exports.FlexItem = FlexItem;

package/dist/cjs/GridRow-mzs0CkNG.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.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 Grid(props) {
+    var id = props.id, after = props.after, before = props.before, children = props.children, className = props.className, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, onClick = props.onClick, type = props.type, useGridSystem = props.useGridSystem, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, dataTour = props.dataTour, verticalResizing = props.verticalResizing;
+    var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_columns_',
+        propsKey: 'columns',
+    });
+    var rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_rows_',
+        propsKey: 'rows',
+    });
+    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_column-gap_',
+        propsKey: 'columnGap',
+    });
+    var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_justify-items_',
+        propsKey: 'justifyItems',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fillWrapper',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fillWrapperInner',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_shape_',
+        propsKey: 'shapeWrapper',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid_shape_',
+        propsKey: 'shapeWrapperInner',
+    });
+    // prettier-ignore
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), gridStyles = _b.styles; _b.gridWrapper; _b.gridWrapperInner;
+    return (jsxRuntime.jsxRuntimeExports.jsxs(Tag, { className: clsx__default.default(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, children: [before && jsxRuntime.jsxRuntimeExports.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsxRuntimeExports.jsx("div", { className: "grid__after", children: after })] }));
+}
+Grid.defaultProps = {
+    tag: 'div',
+};
+
+function GridItem(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, onClick = props.onClick;
+    var orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'order_',
+        propsKey: 'order',
+    });
+    var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_align-self_',
+        propsKey: 'alignSelf',
+    });
+    var justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_justify-self_',
+        propsKey: 'justifySelf',
+    });
+    var columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-start_',
+        propsKey: 'columnStart',
+    });
+    var columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-end_',
+        propsKey: 'columnEnd',
+    });
+    var columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-span_',
+        propsKey: 'columnSpan',
+    });
+    var rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-start_',
+        propsKey: 'rowStart',
+    });
+    var rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-end_',
+        propsKey: 'rowEnd',
+    });
+    var rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-span_',
+        propsKey: 'rowSpan',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'column-gap_',
+        propsKey: 'columnGap',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var gridItemStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass), "data-tour": dataTour, id: String(id), style: gridItemStyles, onClick: onClick, children: children }));
+}
+
+function GridRow(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // @ts-expect-error
+    var gridRowStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+}
+GridRow.defaultProps = {
+    tag: 'div',
+};
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;
+exports.GridRow = GridRow;

package/dist/cjs/Group-4zWTDvKx.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.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);
+
+var groupConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+function Group(props) {
+    var appearance = props.appearance, id = props.id, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor, set = props.set, style = props.style, dataTour = props.dataTour, onClick = props.onClick;
+    var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_content-align_',
+        propsKey: 'contentAlign',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_stacking_',
+        propsKey: 'stacking',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_wrap_',
+        propsKey: 'wrap',
+    });
+    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: 'group_shape_',
+        propsKey: 'shape',
+    });
+    var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_columns_',
+        propsKey: 'columns',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex-grow_',
+        propsKey: 'flexGrow',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    var appearanceConfig = appearance && groupConfig.appearance && groupConfig.appearance[appearance];
+    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)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), alignClass, 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), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+}
+Group.defaultProps = {
+    tag: 'div',
+};
+
+exports.Group = Group;
+exports.groupConfig = groupConfig;

package/dist/cjs/Icon-UBahY607.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var Link = require('./Link-BoShjCEw.js');
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.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');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var SVG__default = /*#__PURE__*/_interopDefault(SVG);
+
+var iconConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        iconConfig.appearance = newComponent;
+    },
+};
+var Icon = React__default.default.forwardRef(function Icon(props, ref) {
+    var _a = React.useState(false), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
+    var Badge = props.Badge, SvgImage = props.SvgImage, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, height = props.height, href = props.href, id = props.id, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, width = props.width, onClick = props.onClick;
+    var svgSizes = React.useMemo(function () {
+        var sizes = {};
+        if (width) {
+            sizes.width = width;
+        }
+        if (height) {
+            sizes.height = height;
+        }
+        return sizes;
+    }, [height, width]);
+    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 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',
+    });
+    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;
+    var ImageComponent = React.useMemo(function () {
+        if (SvgImage) {
+            return jsxRuntime.jsxRuntimeExports.jsx(SvgImage, Link.__assign({}, svgSizes));
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                return jsxRuntime.jsxRuntimeExports.jsx(SVG__default.default, { preProcessor: removeFillStroke, src: imageSrc });
+            }
+            return jsxRuntime.jsxRuntimeExports.jsx("img", { src: imageSrc });
+        }
+        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 }))] }) }));
+});
+Icon.defaultProps = {
+    LinkComponent: 'a',
+};
+var removeFillStroke = function (code) {
+    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+};
+
+exports.Icon = Icon;
+exports.iconConfig = iconConfig;