@itcase/ui 1.9.51 → 1.9.52

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -2,43 +2,43 @@ const CLASS_RULES = {
     fill: [
         {
             key: 'fillClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
         },
         {
             key: 'fillHoverClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
         },
         {
             key: 'fillActiveClass',
-            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
         },
         {
             key: 'fillActiveHoverClass',
-            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
         },
         {
             key: 'fillDisabledClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && Boolean(isDisabled),
+            stateFn: ({ isActive, isDisabled }) => !isActive && Boolean(isDisabled),
         },
     ],
     borderColor: [
         {
             key: 'borderColorClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
         },
         {
             key: 'borderColorHoverClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
         },
         {
             key: 'borderColorActiveClass',
-            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
         },
     ],
     textColor: [
         {
             key: 'textColorClass',
-            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
         },
     ],
 };

package/dist/hooks/useActiveClasses/useActiveClasses.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
 
 const useActiveClasses = (params) => {
-    const { isDisabled, propsGenerator, suffixes = [], isActive } = params;
+    const { propsGenerator, suffixes = [], isActive, isDisabled } = params;
     const rootClassesArray = [];
     Object.entries(CLASS_RULES).forEach(([rulesName, rules]) => {
         const kebabRuleName = toKebabCase(rulesName);
@@ -12,7 +12,7 @@ const useActiveClasses = (params) => {
                 return;
             }
             if (stateFn) {
-                const active = stateFn({ isDisabled, isActive });
+                const active = stateFn({ isActive, isDisabled });
                 if (!active) {
                     return;
                 }
@@ -33,7 +33,7 @@ const useActiveClasses = (params) => {
                     return;
                 }
                 if (stateFn) {
-                    const active = stateFn({ isDisabled, isActive });
+                    const active = stateFn({ isActive, isDisabled });
                     if (!active) {
                         return;
                     }

package/dist/hooks/useStyles/styleAttributes.js

@@ -1,46 +1,169 @@
 var styleAttributes = [
-/**
- * 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'];
+    /**
+     * 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 { styleAttributes as default };

package/dist/hooks/useStyles/useStyles.js

@@ -22,167 +22,181 @@ import '../../utils/setViewportProperty.js';
  * 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];
+    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'].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;
+                }
+            }
         }
-        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'].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;
+        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;
+    // 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;
+    // 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));
         }
-      } else {
-        // Else ignore
-        return false;
-      }
-    } else {
-      // If is target attribute
-      return styleKey.startsWith(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;
+    });
+    // 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 };

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

@@ -14,8 +14,8 @@ type AvatarAppearanceProps = {
     badgeValue?: BadgeProps['value'];
     borderColor?: BorderColorProps;
     fill?: FillProps;
-    fillHoverClass?: FillHoverProps;
-    icon?: string;
+    fillHover?: FillHoverProps;
+    icon?: IconProps['SvgImage'];
     iconFill?: IconProps['fill'];
     iconFillHover?: IconProps['fillHover'];
     iconFillSize?: IconProps['fillSize'];