@itcase/ui 1.9.65 → 1.9.67

package/dist/hooks/useHoldProgress.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+
 const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
 const HOLD_STATE = {
     HOLDING: 'holding',
@@ -54,4 +55,5 @@ function useHoldProgress(options) {
         onHoldStart,
     };
 }
+
 export { useHoldProgress };

package/dist/hooks/useMediaQueries/useMediaQueries.js

@@ -1,112 +1,12 @@
-import { useMemo } from 'react';
-import { useMediaQuery } from 'react-responsive';
-import mediaQueries from './mediaQueries.json';
-const isSSR = typeof window === 'undefined';
-function useMediaQueries(userDevice = {}) {
-    // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
-    // prettier-ignore
-    const isMobile = (useMediaQuery({
-        minWidth: mediaQueries['mobile-tiny'],
-        maxWidth: mediaQueries['tablet'],
-    }) ||
-        (isSSR && Boolean(userDevice.isMobile)));
-    // const isMobileTiny = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-tiny'],
-    //   maxWidth: mediaQueries['mobile-small'],
-    // })
-    // const isMobileSmall = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-small'],
-    //   maxWidth: mediaQueries['mobile-medium'],
-    // })
-    // const isMobileMedium = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-medium'],
-    //   maxWidth: mediaQueries['mobile-normal'],
-    // })
-    // const isMobileNormal = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-normal'],
-    //   maxWidth: mediaQueries['mobile-large'],
-    // })
-    // const isMobileStandart = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-large'],
-    //   maxWidth: mediaQueries['mobile-extra-large'],
-    // })
-    // const isMobileLarge = useMediaQuery({
-    //   minWidth: mediaQueries['mobile-extra-large'],
-    //   maxWidth: mediaQueries['mobile-super-extra-large'],
-    // })
-    const isMobileHuge = useMediaQuery({
-        minWidth: mediaQueries['mobile-super-extra-large'],
-        maxWidth: mediaQueries['tablet'],
-    });
-    // prettier-ignore
-    const isTablet = (useMediaQuery({
-        minWidth: mediaQueries['tablet'],
-        maxWidth: mediaQueries['desktop-small'],
-    }) ||
-        (isSSR && Boolean(userDevice.isTablet)));
-    // const isTabletSmall = useMediaQuery({
-    //   minWidth: mediaQueries['tablet-small'],
-    //   maxWidth: mediaQueries['tablet'],
-    // })
-    // const isTabletLarge = useMediaQuery({
-    //   minWidth: mediaQueries['tablet'],
-    //   maxWidth: mediaQueries['tablet-large'],
-    // })
-    // prettier-ignore
-    const isDesktop = (useMediaQuery({
-        minWidth: mediaQueries['desktop-small'],
-        maxWidth: mediaQueries['desktop-super-huge'],
-    }) ||
-        (isSSR && Boolean(userDevice.isDesktop)));
-    // const isDesktopSmall = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-small'],
-    //   maxWidth: mediaQueries['desktop-medium'],
-    // })
-    // const isDesktopMedium = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-medium'],
-    //   maxWidth: mediaQueries['desktop-normal'],
-    // })
-    // const isDesktopNormal = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-normal'],
-    //   maxWidth: mediaQueries['desktop-large'],
-    // })
-    // const isDesktopStandart = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-large'],
-    //   maxWidth: mediaQueries['desktop-extra-large'],
-    // })
-    // const isDesktopLarge = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-extra-large'],
-    //   maxWidth: mediaQueries['desktop-super-extra-large'],
-    // })
-    // const isDesktopHuge = useMediaQuery({
-    //   minWidth: mediaQueries['desktop-super-extra-large'],
-    //   maxWidth: mediaQueries['desktop-huge'],
-    // })
-    const isDesktopMega = useMediaQuery({
-        minWidth: mediaQueries['desktop-huge'],
-    });
-    const deviceTypes = useMemo(() => ({
-        // isWarning,
-        isMobile: isMobile,
-        // isMobileTiny,
-        // isMobileSmall,
-        // isMobileMedium,
-        // isMobileNormal,
-        // isMobileStandart,
-        // isMobileLarge,
-        isMobileHuge: isMobile,
-        isTablet: isTablet,
-        // isTabletSmall,
-        // isTabletLarge,
-        isDesktop: isDesktop,
-        // isDesktopSmall,
-        // isDesktopMedium,
-        // isDesktopNormal,
-        // isDesktopStandart,
-        // isDesktopLarge,
-        // isDesktopHuge,
-        isDesktopMega: isDesktopMega,
-    }), [isMobile, isTablet, isDesktop, isDesktopMega]);
-    return deviceTypes;
-}
-export { useMediaQueries };
+import 'react';
+import 'react-responsive';
+export { l as useMediaQueries } from '../../primitives_es_C7NgMhaK.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/dist/hooks/useMediaQueries.js

@@ -1,4 +1,4 @@
-export { l as useMediaQueries } from '../primitives_es_dSATude_.js';
+export { l as useMediaQueries } from '../primitives_es_C7NgMhaK.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/hooks/useStyles/styleAttributes.interface.js

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

package/dist/hooks/useStyles/styleAttributes.js

@@ -1,167 +1,12 @@
-export default [
-    /**
-     * Layout
-     */
-    'alignContent',
-    'alignItems',
-    'alignSelf',
-    'aspectRatio',
-    'border',
-    'borderBottomWidth',
-    'borderLeftWidth',
-    'borderRightWidth',
-    'borderTopWidth',
-    'borderWidth',
-    'bottom',
-    'display',
-    'flex',
-    'flexBasis',
-    'flexDirection',
-    'flexGrow',
-    'flexShrink',
-    'flexWrap',
-    'gap',
-    'rowGap',
-    'columnGap',
-    'columnWidth',
-    'height',
-    'justifyContent',
-    'left',
-    'margin',
-    'marginBottom',
-    'marginHorizontal',
-    'marginLeft',
-    'marginRight',
-    'marginTop',
-    'marginVertical',
-    'maxHeight',
-    'maxWidth',
-    'minHeight',
-    'minWidth',
-    'overflow',
-    'overflowY',
-    'overflowX',
-    'padding',
-    'paddingBottom',
-    'paddingEnd',
-    'paddingHorizontal',
-    'paddingLeft',
-    'paddingRight',
-    'paddingStart',
-    'paddingTop',
-    'paddingVertical',
-    'position',
-    'right',
-    'top',
-    [
-        'width',
-        {
-            validate: (value) => {
-                // Pass only number value for "width" style.
-                // If width have custom value, like "fill", we must set class by this value.
-                // "\d" - digit; "+" - 1 or more
-                return /\d+/.test(value);
-            },
-        },
-    ],
-    'zIndex',
-    'order',
-    /**
-     * Shadow
-     */
-    'shadowColor',
-    'shadowOffset',
-    'shadowOpacity',
-    'shadowRadius',
-    /**
-     * Transform
-     */
-    'transform',
-    /**
-     * View
-     */
-    'background',
-    'backgroundColor',
-    'borderBottomColor',
-    'borderBottomEndRadius',
-    'borderBottomLeftRadius',
-    'borderBottomRightRadius',
-    'borderBottomStartRadius',
-    'borderColor',
-    'borderCurve',
-    'borderEndColor',
-    'borderLeftColor',
-    'borderRadius',
-    'borderRightColor',
-    'borderStartColor',
-    'borderStyle',
-    'borderTopColor',
-    'borderTopEndRadius',
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderTopStartRadius',
-    'opacity',
-    'cursor',
-    /**
-     * Text
-     */
-    'color',
-    'fontFamily',
-    'fontSize',
-    'fontStyle',
-    'fontVariant',
-    'fontWeight',
-    'letterSpacing',
-    'lineHeight',
-    'textAlign',
-    'textDecorationColor',
-    'textDecorationLine',
-    'textDecorationStyle',
-    'textShadowColor',
-    'textShadowOffset',
-    'textShadowRadius',
-    'textTransform',
-    'verticalAlign',
-    'writingMode',
-    'whiteSpace',
-    /**
-     * Image
-     */
-    'overlayColor',
-    'resizeMode',
-    'tintColor',
-    'objectFit',
-    'objectPosition',
-    /**
-     * Grid
-     */
-    'gridTemplateColumns',
-    'gridArea',
-    'gridAutoColumns',
-    'gridAutoFlow',
-    'gridAutoRows',
-    'gridTemplate',
-    'gridTemplateAreas',
-    'gridTemplateRows',
-    'gridColumn',
-    'gridColumnStart',
-    'gridColumnEnd',
-    'gridColumnGap',
-    'gridRow',
-    'gridRowStart',
-    'gridRowEnd',
-    'gridRowGap',
-    /**
-     * Filter
-     */
-    'backdropFilter',
-    /**
-     * transition
-     */
-    'transition',
-    'transitionBehavior',
-    'transitionDelay',
-    'transitionDuration',
-    'transitionProperty',
-    'transitionTimingFunction',
-];
+export { o as default } from '../../primitives_es_C7NgMhaK.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/dist/hooks/useStyles/useStyles.js

@@ -1,193 +1,12 @@
-import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import maxBy from 'lodash/maxBy';
-import upperFirst from 'lodash/upperFirst';
-import { useUserDeviceContext } from '../../context';
-import { getStyleAttributeKey } from '../index.helpers';
-import styleAttributes from './styleAttributes';
-/*
- * rule of prop key:
- *
- * first is style     second is div target  third is device
- * paddingHorizontal  GridInnerWrapper      MobileNormal
- *
- * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
- */
-function useStyles(props) {
-    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = useUserDeviceContext();
-    const propsStyleAttributes = useMemo(() => {
-        const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
-            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
-            if (styleAttributeKey) {
-                result[propKey] = propValue;
-            }
-            return result;
-        }, {});
-        return styles;
-        // "props" object maybe big and frequently changing
-    }, [props]);
-    const collectedStyles = useMemo(() => {
-        const resultStylesGroups = {};
-        for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
-            let value = null;
-            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
-            const isStyleForCurrentDevice = propKey
-                .toLowerCase()
-                .endsWith(deviceCurrentType.toLowerCase());
-            // e.g. "GridWrapperInner"
-            const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
-            const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
-            if (!resultStylesGroups[targetElementGroupKey]) {
-                resultStylesGroups[targetElementGroupKey] = {};
-            }
-            if (isStyleForCurrentDevice) {
-                value = propValue;
-            }
-            else {
-                const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
-                const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
-                const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-                let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
-                if (propKeyWithOutDeviceType.includes('Horizontal')) {
-                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-                    currentValue =
-                        resultStylesGroups[targetElementGroupKey][keyLeft];
-                }
-                else if (propKeyWithOutDeviceType.includes('Vertical')) {
-                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-                    currentValue =
-                        resultStylesGroups[targetElementGroupKey][keyTop];
-                }
-                if (!currentValue) {
-                    value = defaultValue;
-                }
-            }
-            if (value) {
-                // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
-                const isValueHasUnit = /\D/.test(value);
-                // If value has some unit
-                if (isValueHasUnit) {
-                    // Check value on our custom "m"(module) unit
-                    /** Pattern for:
-                     * 1m
-                     * 1.5m
-                     * 1m 1m 1.5m
-                     * 0 0 1m 1m
-                     */
-                    const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
-                    // If value has module unit
-                    if (isValueHasModuleUnit) {
-                        /** Order for shorthand properties:
-                         *   top
-                         *   right
-                         *   bottom
-                         *   left
-                         * or:
-                         *   top
-                         *   right and left
-                         *   bottom
-                         * or:
-                         *   top and bottom
-                         *   right and left
-                         */
-                        const valuePxPartsList = value
-                            .split(' ')
-                            .map((valuePart) => {
-                            const valueModule = valuePart.replace(/[a-z]/gi, '');
-                            const valuePx = parseFloat(valueModule) * 8;
-                            return `${valuePx}px`;
-                        }, []);
-                        value = valuePxPartsList.join(' ');
-                    }
-                }
-                else {
-                    // Some properties doesn't have any units
-                    const ignorePX = ['zIndex', 'order', 'flexGrow', 'opacity'].includes(styleAttributeKey);
-                    if (!ignorePX) {
-                        // Add px to non-unit value
-                        value = `${value}px`;
-                    }
-                }
-                if (styleAttributeKey.includes('Horizontal')) {
-                    const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
-                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-                    const valuePartsList = value.split(' ');
-                    const valueRight = valuePartsList[0];
-                    const valueLeft = valuePartsList[1] || valuePartsList[0];
-                    resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
-                    resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
-                }
-                else if (styleAttributeKey.includes('Vertical')) {
-                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-                    const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
-                    const valuePartsList = value.split(' ');
-                    const valueTop = valuePartsList[0];
-                    const valueBottom = valuePartsList[1] || valuePartsList[0];
-                    resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
-                    resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
-                }
-                else {
-                    resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
-                }
-            }
-        }
-        return resultStylesGroups;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        deviceCurrentMainType,
-        deviceCurrentType,
-        ...Object.values(propsStyleAttributes),
-    ]);
-    return collectedStyles;
-}
-const removeDeviceType = (originalKey, deviceTypesList) => {
-    // Remove "mobile"/"tablet"/"desktop"
-    const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
-        if (cleanKey.endsWith(upperFirst(deviceType))) {
-            return cleanKey.replace(upperFirst(deviceType), '');
-        }
-        return cleanKey;
-    }, originalKey);
-    return withOutDeviceType;
-};
-const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
-    // Collect list of possible styles for propKey. e.g:
-    // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-    const possibleStyleAttributesList = styleAttributes.filter((styleAttribute) => {
-        // Attribute can be array with key on first position and params on second
-        if (Array.isArray(styleAttribute)) {
-            // First item always attribute key (e.g. border, width, etc)
-            const styleAttributeKey = styleAttribute[0];
-            // Second item always params with some settings or methods
-            const styleAttributeParams = styleAttribute[1] || {};
-            // If is target attribute key
-            if (styleKey.startsWith(styleAttributeKey)) {
-                // If target attribute params has validate method
-                if (styleAttributeParams.validate) {
-                    // Return validation result for target attribute
-                    return styleAttributeParams.validate(styleValue);
-                }
-                else {
-                    // Or always add to list
-                    return true;
-                }
-            }
-            else {
-                // Else ignore
-                return false;
-            }
-        }
-        else {
-            // If is target attribute
-            return styleKey.startsWith(String(styleAttribute));
-        }
-    });
-    // Get longest style key (e.g. "borderLeftWidth")
-    const targetStyleAttribute = maxBy(possibleStyleAttributesList, (styleAttribute) => {
-        const key = getStyleAttributeKey(styleAttribute);
-        return key.length;
-    });
-    const styleAttributeKey = getStyleAttributeKey(targetStyleAttribute);
-    return styleAttributeKey;
-};
-export { useStyles };
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+export { u as useStyles } from '../../primitives_es_C7NgMhaK.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'lodash/castArray';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'react-inlinesvg';

package/dist/hooks/useStyles.js

@@ -1,4 +1,4 @@
-export { u as useStyles } from '../primitives_es_dSATude_.js';
+export { u as useStyles } from '../primitives_es_C7NgMhaK.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/hooks/useViewportFix.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 function useViewportFix() {
     useEffect(() => {
         // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -36,4 +37,5 @@ function useViewportFix() {
         };
     }, []);
 }
+
 export { useViewportFix };

package/dist/hooks.js

@@ -1,4 +1,4 @@
-export { n as getStyleAttributeKey } from './primitives_es_dSATude_.js';
+export { n as getStyleAttributeKey } from './primitives_es_C7NgMhaK.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/{primitives_cjs_B0VJShTC.js → primitives_cjs_BM6q7o8p.js}

@@ -2315,7 +2315,7 @@ const iconConfig = {
     },
 };
 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 { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, svgImageStyles, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
     const ImageComponent = React.useMemo(() => {
         if (SvgImage) {
             const SvgComponent = SvgImage;
@@ -2326,7 +2326,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
             if (height) {
                 sizes.height = height;
             }
-            return jsxRuntime.jsx(SvgComponent, { ...sizes });
+            return jsxRuntime.jsx(SvgComponent, { ...sizes, ...svgImageStyles });
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -2338,7 +2338,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
             return jsxRuntime.jsx("img", { src: imageSrc });
         }
         return null;
-    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
+    }, [SvgImage, imageSrc, width, height, svgImageStyles, 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;

package/dist/{primitives_es_dSATude_.js → primitives_es_C7NgMhaK.js}

@@ -2313,7 +2313,7 @@ const iconConfig = {
     },
 };
 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 { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, svgImageStyles, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
     const ImageComponent = useMemo(() => {
         if (SvgImage) {
             const SvgComponent = SvgImage;
@@ -2324,7 +2324,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
             if (height) {
                 sizes.height = height;
             }
-            return jsx(SvgComponent, { ...sizes });
+            return jsx(SvgComponent, { ...sizes, ...svgImageStyles });
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -2336,7 +2336,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
             return jsx("img", { src: imageSrc });
         }
         return null;
-    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
+    }, [SvgImage, imageSrc, width, height, svgImageStyles, 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;

package/dist/types/components/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
 import type { IconConfig } from 'src/components/Icon/Icon.interface';
 declare const iconConfig: IconConfig;
 declare const Icon: React.ForwardRefExoticComponent<Omit<import("src/components/Icon/Icon.interface").IconAppearanceProps & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
@@ -31,6 +31,7 @@ declare const Icon: React.ForwardRefExoticComponent<Omit<import("src/components/
     showTooltip?: boolean;
     style?: React.CSSProperties;
     SvgImage?: string;
+    svgImageStyles?: SVGProps<SVGSVGElement>;
     text?: string;
     title?: string;
     tooltipText?: string;

package/dist/types/components/Icon/Icon.interface.d.ts

@@ -1,10 +1,10 @@
-import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode, SVGProps } from 'react';
 import { AlignmentProps, AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceDefaultStyleShapeKey, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizePXProps, TextColorProps, TextSizeProps } from '@itcase/types-ui';
+import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
 import { TitleProps } from '../Title/Title.interface';
 import { TooltipProps } from '../Tooltip/Tooltip.interface';
-import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 type IconAppearanceProps = {
     alignment?: AlignmentProps;
     badgeAppearance?: BadgeProps['appearance'];
@@ -74,6 +74,7 @@ type IconProps = IconAppearanceProps & StyleAttributes & {
     showTooltip?: boolean;
     style?: CSSProperties;
     SvgImage?: string;
+    svgImageStyles?: SVGProps<SVGSVGElement>;
     text?: string;
     title?: string;
     tooltipText?: string;