@alfalab/core-components 45.1.0 → 45.3.0

package/icon-button/esm/inverted.css

@@ -74,50 +74,50 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1uc1f {
+} .cc-icon-button.icon-button__primary_1bf18 {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1uc1f:hover {
+    } .cc-icon-button.icon-button__primary_1bf18:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1uc1f:active {
+        } .cc-icon-button.icon-button__primary_1bf18:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f {
+        } .cc-icon-button.icon-button__secondary_1bf18 {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1uc1f:hover {
+    } .cc-icon-button.icon-button__secondary_1bf18:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f:active {
+        } .cc-icon-button.icon-button__secondary_1bf18:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f {
+        } .cc-icon-button.icon-button__transparent_1bf18 {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1uc1f:hover {
+    } .cc-icon-button.icon-button__transparent_1bf18:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f:active {
+        } .cc-icon-button.icon-button__transparent_1bf18:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1uc1f {
+        } .cc-icon-button.icon-button__negative_1bf18 {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1uc1f:hover {
+    } .cc-icon-button.icon-button__negative_1bf18:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1uc1f:active {
+        } .cc-icon-button.icon-button__negative_1bf18:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f {
+        } .cc-icon-button.icon-button__tertiary_1bf18 {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1uc1f:hover {
+    } .cc-icon-button.icon-button__tertiary_1bf18:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f:active {
+        } .cc-icon-button.icon-button__tertiary_1bf18:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18 {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18 {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18 {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18 {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-tertiary-base-color);
             }

package/icon-button/index.css

@@ -20,34 +20,34 @@
     --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
     --icon-button-56-size: 56px;
-} .icon-button__size-24_ws6r3 {
+} .icon-button__size-24_j4fig {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__size-32_ws6r3 {
+} .icon-button__size-32_j4fig {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__size-40_ws6r3 {
+} .icon-button__size-40_j4fig {
     width: var(--icon-button-40-size);
     height: var(--icon-button-40-size);
-} .icon-button__size-48_ws6r3 {
+} .icon-button__size-48_j4fig {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__size-56_ws6r3 {
+} .icon-button__size-56_j4fig {
     width: var(--icon-button-56-size);
     height: var(--icon-button-56-size);
-} .icon-button__iconWrapper_ws6r3 {
+} .icon-button__iconWrapper_j4fig {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_ws6r3.icon-button__center_ws6r3 {
+} .icon-button__iconWrapper_j4fig.icon-button__center_j4fig {
         justify-content: center;
         margin: 0 auto;
-    } .icon-button__iconWrapper_ws6r3.icon-button__left_ws6r3 {
+    } .icon-button__iconWrapper_j4fig.icon-button__left_j4fig {
         justify-content: left;
-    } .icon-button__iconWrapper_ws6r3.icon-button__right_ws6r3 {
+    } .icon-button__iconWrapper_j4fig.icon-button__right_j4fig {
         justify-content: right;
-    } .icon-button__icon_ws6r3 {
+    } .icon-button__icon_j4fig {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_ws6r3 *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_j4fig *[fill-rule] {
     fill: currentColor;
 }

package/icon-button/inverted.css

@@ -74,50 +74,50 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1uc1f {
+} .cc-icon-button.icon-button__primary_1bf18 {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1uc1f:hover {
+    } .cc-icon-button.icon-button__primary_1bf18:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1uc1f:active {
+        } .cc-icon-button.icon-button__primary_1bf18:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f {
+        } .cc-icon-button.icon-button__secondary_1bf18 {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1uc1f:hover {
+    } .cc-icon-button.icon-button__secondary_1bf18:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f:active {
+        } .cc-icon-button.icon-button__secondary_1bf18:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f {
+        } .cc-icon-button.icon-button__transparent_1bf18 {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1uc1f:hover {
+    } .cc-icon-button.icon-button__transparent_1bf18:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f:active {
+        } .cc-icon-button.icon-button__transparent_1bf18:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1uc1f {
+        } .cc-icon-button.icon-button__negative_1bf18 {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1uc1f:hover {
+    } .cc-icon-button.icon-button__negative_1bf18:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1uc1f:active {
+        } .cc-icon-button.icon-button__negative_1bf18:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f {
+        } .cc-icon-button.icon-button__tertiary_1bf18 {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1uc1f:hover {
+    } .cc-icon-button.icon-button__tertiary_1bf18:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f:active {
+        } .cc-icon-button.icon-button__tertiary_1bf18:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18 {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18 {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18 {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18 {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-tertiary-base-color);
             }

package/icon-button/modern/Component.js

@@ -2,13 +2,13 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../button/modern';
 
-const defaultColors = {"primary":"icon-button__primary_1il05","secondary":"icon-button__secondary_1il05","transparent":"icon-button__transparent_1il05","negative":"icon-button__negative_1il05","tertiary":"icon-button__tertiary_1il05","component":"icon-button__component_1il05","loader":"icon-button__loader_1il05"};
+const defaultColors = {"primary":"icon-button__primary_znzxt","secondary":"icon-button__secondary_znzxt","transparent":"icon-button__transparent_znzxt","negative":"icon-button__negative_znzxt","tertiary":"icon-button__tertiary_znzxt","component":"icon-button__component_znzxt","loader":"icon-button__loader_znzxt"};
 require('./default.css');
 
-const styles = {"size-24":"icon-button__size-24_ws6r3","size-32":"icon-button__size-32_ws6r3","size-40":"icon-button__size-40_ws6r3","size-48":"icon-button__size-48_ws6r3","size-56":"icon-button__size-56_ws6r3","iconWrapper":"icon-button__iconWrapper_ws6r3","center":"icon-button__center_ws6r3","left":"icon-button__left_ws6r3","right":"icon-button__right_ws6r3","icon":"icon-button__icon_ws6r3"};
+const styles = {"size-24":"icon-button__size-24_j4fig","size-32":"icon-button__size-32_j4fig","size-40":"icon-button__size-40_j4fig","size-48":"icon-button__size-48_j4fig","size-56":"icon-button__size-56_j4fig","iconWrapper":"icon-button__iconWrapper_j4fig","center":"icon-button__center_j4fig","left":"icon-button__left_j4fig","right":"icon-button__right_j4fig","icon":"icon-button__icon_j4fig"};
 require('./index.css');
 
-const invertedColors = {"primary":"icon-button__primary_1uc1f","secondary":"icon-button__secondary_1uc1f","transparent":"icon-button__transparent_1uc1f","negative":"icon-button__negative_1uc1f","tertiary":"icon-button__tertiary_1uc1f","component":"icon-button__component_1uc1f","loader":"icon-button__loader_1uc1f"};
+const invertedColors = {"primary":"icon-button__primary_1bf18","secondary":"icon-button__secondary_1bf18","transparent":"icon-button__transparent_1bf18","negative":"icon-button__negative_1bf18","tertiary":"icon-button__tertiary_1bf18","component":"icon-button__component_1bf18","loader":"icon-button__loader_1bf18"};
 require('./inverted.css');
 
 const colorStyles = {

package/icon-button/modern/default.css

@@ -59,50 +59,50 @@
     --icon-button-negative-hover-color: var(--color-light-status-negative-hover);
     --icon-button-negative-active-color: var(--color-light-status-negative-press);
     --icon-button-negative-disabled-color: var(--color-light-neutral-translucent-300);
-} .cc-icon-button.icon-button__primary_1il05 {
+} .cc-icon-button.icon-button__primary_znzxt {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1il05:hover {
+    } .cc-icon-button.icon-button__primary_znzxt:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1il05:active {
+        } .cc-icon-button.icon-button__primary_znzxt:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1il05 {
+        } .cc-icon-button.icon-button__secondary_znzxt {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1il05:hover {
+    } .cc-icon-button.icon-button__secondary_znzxt:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1il05:active {
+        } .cc-icon-button.icon-button__secondary_znzxt:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1il05 {
+        } .cc-icon-button.icon-button__transparent_znzxt {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1il05:hover {
+    } .cc-icon-button.icon-button__transparent_znzxt:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1il05:active {
+        } .cc-icon-button.icon-button__transparent_znzxt:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1il05 {
+        } .cc-icon-button.icon-button__negative_znzxt {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1il05:hover {
+    } .cc-icon-button.icon-button__negative_znzxt:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1il05:active {
+        } .cc-icon-button.icon-button__negative_znzxt:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1il05 {
+        } .cc-icon-button.icon-button__tertiary_znzxt {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1il05:hover {
+    } .cc-icon-button.icon-button__tertiary_znzxt:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1il05:active {
+        } .cc-icon-button.icon-button__tertiary_znzxt:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__primary_1il05 {
+        } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__primary_znzxt {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__primary_1il05.icon-button__loader_1il05 {
+        } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__primary_znzxt.icon-button__loader_znzxt {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__secondary_1il05 {
+            } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__secondary_znzxt {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__secondary_1il05.icon-button__loader_1il05 {
+        } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__secondary_znzxt.icon-button__loader_znzxt {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__negative_1il05 {
+            } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__negative_znzxt {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__negative_1il05.icon-button__loader_1il05 {
+        } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__negative_znzxt.icon-button__loader_znzxt {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__tertiary_1il05 {
+            } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__tertiary_znzxt {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1il05:disabled.icon-button__tertiary_1il05.icon-button__loader_1il05 {
+        } .cc-icon-button.icon-button__component_znzxt:disabled.icon-button__tertiary_znzxt.icon-button__loader_znzxt {
                 color: var(--icon-button-tertiary-base-color);
             }

package/icon-button/modern/index.css

@@ -20,34 +20,34 @@
     --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
     --icon-button-56-size: 56px;
-} .icon-button__size-24_ws6r3 {
+} .icon-button__size-24_j4fig {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__size-32_ws6r3 {
+} .icon-button__size-32_j4fig {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__size-40_ws6r3 {
+} .icon-button__size-40_j4fig {
     width: var(--icon-button-40-size);
     height: var(--icon-button-40-size);
-} .icon-button__size-48_ws6r3 {
+} .icon-button__size-48_j4fig {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__size-56_ws6r3 {
+} .icon-button__size-56_j4fig {
     width: var(--icon-button-56-size);
     height: var(--icon-button-56-size);
-} .icon-button__iconWrapper_ws6r3 {
+} .icon-button__iconWrapper_j4fig {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_ws6r3.icon-button__center_ws6r3 {
+} .icon-button__iconWrapper_j4fig.icon-button__center_j4fig {
         justify-content: center;
         margin: 0 auto;
-    } .icon-button__iconWrapper_ws6r3.icon-button__left_ws6r3 {
+    } .icon-button__iconWrapper_j4fig.icon-button__left_j4fig {
         justify-content: left;
-    } .icon-button__iconWrapper_ws6r3.icon-button__right_ws6r3 {
+    } .icon-button__iconWrapper_j4fig.icon-button__right_j4fig {
         justify-content: right;
-    } .icon-button__icon_ws6r3 {
+    } .icon-button__icon_j4fig {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_ws6r3 *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_j4fig *[fill-rule] {
     fill: currentColor;
 }

package/icon-button/modern/inverted.css

@@ -74,50 +74,50 @@
     --icon-button-inverted-negative-disabled-color: var(
         --color-light-neutral-translucent-300-inverted
     );
-} .cc-icon-button.icon-button__primary_1uc1f {
+} .cc-icon-button.icon-button__primary_1bf18 {
         color: var(--icon-button-inverted-primary-base-color)
-    } .cc-icon-button.icon-button__primary_1uc1f:hover {
+    } .cc-icon-button.icon-button__primary_1bf18:hover {
             color: var(--icon-button-inverted-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_1uc1f:active {
+        } .cc-icon-button.icon-button__primary_1bf18:active {
             color: var(--icon-button-inverted-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f {
+        } .cc-icon-button.icon-button__secondary_1bf18 {
         color: var(--icon-button-inverted-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_1uc1f:hover {
+    } .cc-icon-button.icon-button__secondary_1bf18:hover {
             color: var(--icon-button-inverted-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_1uc1f:active {
+        } .cc-icon-button.icon-button__secondary_1bf18:active {
             color: var(--icon-button-inverted-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f {
+        } .cc-icon-button.icon-button__transparent_1bf18 {
         color: var(--icon-button-inverted-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_1uc1f:hover {
+    } .cc-icon-button.icon-button__transparent_1bf18:hover {
             color: var(--icon-button-inverted-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_1uc1f:active {
+        } .cc-icon-button.icon-button__transparent_1bf18:active {
             color: var(--icon-button-inverted-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_1uc1f {
+        } .cc-icon-button.icon-button__negative_1bf18 {
         color: var(--icon-button-inverted-negative-base-color)
-    } .cc-icon-button.icon-button__negative_1uc1f:hover {
+    } .cc-icon-button.icon-button__negative_1bf18:hover {
             color: var(--icon-button-inverted-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_1uc1f:active {
+        } .cc-icon-button.icon-button__negative_1bf18:active {
             color: var(--icon-button-inverted-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f {
+        } .cc-icon-button.icon-button__tertiary_1bf18 {
         color: var(--icon-button-inverted-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_1uc1f:hover {
+    } .cc-icon-button.icon-button__tertiary_1bf18:hover {
             color: var(--icon-button-inverted-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_1uc1f:active {
+        } .cc-icon-button.icon-button__tertiary_1bf18:active {
             color: var(--icon-button-inverted-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18 {
             color: var(--icon-button-inverted-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__primary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__primary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-primary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18 {
             color: var(--icon-button-inverted-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__secondary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__secondary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-secondary-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18 {
             color: var(--icon-button-inverted-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__negative_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__negative_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-negative-base-color);
-            } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f {
+            } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18 {
             color: var(--icon-button-inverted-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_1uc1f:disabled.icon-button__tertiary_1uc1f.icon-button__loader_1uc1f {
+        } .cc-icon-button.icon-button__component_1bf18:disabled.icon-button__tertiary_1bf18.icon-button__loader_1bf18 {
                 color: var(--icon-button-inverted-tertiary-base-color);
             }

package/icon-view/components/base-shape/component.js

@@ -10,12 +10,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"componentWrapper":"icon-view__componentWrapper_nhseu","component":"icon-view__component_nhseu","bg":"icon-view__bg_nhseu","border":"icon-view__border_nhseu","text":"icon-view__text_nhseu","children":"icon-view__children_nhseu","addons":"icon-view__addons_nhseu","size_128":"icon-view__size_128_nhseu","topAddons":"icon-view__topAddons_nhseu","bottomAddons":"icon-view__bottomAddons_nhseu","size_80":"icon-view__size_80_nhseu","indicator":"icon-view__indicator_nhseu","size_64":"icon-view__size_64_nhseu","size_56":"icon-view__size_56_nhseu","size_48":"icon-view__size_48_nhseu","size_40":"icon-view__size_40_nhseu","size_32":"icon-view__size_32_nhseu","size_24":"icon-view__size_24_nhseu","size_20":"icon-view__size_20_nhseu","size_16":"icon-view__size_16_nhseu","size-16":"icon-view__size-16_nhseu","size-20":"icon-view__size-20_nhseu","size-24":"icon-view__size-24_nhseu","size-32":"icon-view__size-32_nhseu","size-40":"icon-view__size-40_nhseu","size-48":"icon-view__size-48_nhseu","size-56":"icon-view__size-56_nhseu","size-64":"icon-view__size-64_nhseu","size-80":"icon-view__size-80_nhseu","size-128":"icon-view__size-128_nhseu"};
+var styles = {"componentWrapper":"icon-view__componentWrapper_bfphg","component":"icon-view__component_bfphg","bg":"icon-view__bg_bfphg","border":"icon-view__border_bfphg","text":"icon-view__text_bfphg","children":"icon-view__children_bfphg","addons":"icon-view__addons_bfphg","size_128":"icon-view__size_128_bfphg","topAddons":"icon-view__topAddons_bfphg","bottomAddons":"icon-view__bottomAddons_bfphg","size_80":"icon-view__size_80_bfphg","indicator":"icon-view__indicator_bfphg","size_64":"icon-view__size_64_bfphg","size_56":"icon-view__size_56_bfphg","size_48":"icon-view__size_48_bfphg","size_40":"icon-view__size_40_bfphg","size_32":"icon-view__size_32_bfphg","size_24":"icon-view__size_24_bfphg","size_20":"icon-view__size_20_bfphg","size_16":"icon-view__size_16_bfphg","size-16":"icon-view__size-16_bfphg","size-20":"icon-view__size-20_bfphg","size-24":"icon-view__size-24_bfphg","size-32":"icon-view__size-32_bfphg","size-40":"icon-view__size-40_bfphg","size-48":"icon-view__size-48_bfphg","size-56":"icon-view__size-56_bfphg","size-64":"icon-view__size-64_bfphg","size-80":"icon-view__size-80_bfphg","size-128":"icon-view__size-128_bfphg"};
 require('./index.css');
 
 var BaseShape = React.forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize;
     var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
+    var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
+    var loadedUrl = imageLoadingState === 'loaded' ? imageUrl : undefined;
     var imagePatternId = hooks.useId();
     var svgPatternId = hooks.useId();
     var hasTopAddons = Boolean(topAddons) && width > 32;
@@ -33,10 +35,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                         hasIndicator: hasIndicator,
                         pathsMap: pathsMap.shape,
                     }) }),
-                imageUrl && (React__default.default.createElement(React.Fragment, null,
+                loadedUrl && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
                         React__default.default.createElement("pattern", { id: imagePatternId, width: '100%', height: '100%' },
-                            React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
+                            React__default.default.createElement("image", { href: loadedUrl, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' }))),
                     React__default.default.createElement("path", { style: {
                             fill: "url(#".concat(imagePatternId, ")"),
                         }, d: components_baseShape_utils.getPath({