@alfalab/core-components 45.8.0-beta.3 → 45.8.0-beta.5

package/tab-bar/modern/types.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { IndicatorProps } from "../../indicator";
+import { BadgeProps } from "../../badge";
 type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
@@ -48,14 +48,6 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
      * Обработчик изменения выбранного таба
      */
     onChange?: (id: string) => void;
-    /**
-     * Цвет активного таба
-     */
-    accentColor?: 'primary' | 'secondary';
-    /**
-     * Цвет фона
-     */
-    bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
 }
 type AdditionalTabProps = Record<string, unknown>;
 interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -83,7 +75,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
     /**
      * Свойства индикатора
      */
-    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
+    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
     /**
      *  Дополнительный класс таба
      */
@@ -101,7 +93,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
      */
     iconClassName?: string;
 }
-interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
     selected: boolean;
 }
 export { TabBarProps, TabProps, PrivateTabProps };

package/tab-bar/types.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { IndicatorProps } from "../indicator";
+import { BadgeProps } from "../badge";
 type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
@@ -48,14 +48,6 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
      * Обработчик изменения выбранного таба
      */
     onChange?: (id: string) => void;
-    /**
-     * Цвет активного таба
-     */
-    accentColor?: 'primary' | 'secondary';
-    /**
-     * Цвет фона
-     */
-    bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
 }
 type AdditionalTabProps = Record<string, unknown>;
 interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -83,7 +75,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
     /**
      * Свойства индикатора
      */
-    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
+    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
     /**
      *  Дополнительный класс таба
      */
@@ -101,7 +93,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
      */
     iconClassName?: string;
 }
-interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
     selected: boolean;
 }
 export { TabBarProps, TabProps, PrivateTabProps };

package/themes/click.css

@@ -1637,6 +1637,12 @@
     --toast-plate-action-margin: 0;
     /* theme */
     --list-item-margin: var(--gap-m);
+    /* theme */
+    --skeleton-default-color: transparent;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-gradient-animation-display: none;
+    --skeleton-bg-animation-display: block;
+    --skeleton-bg-animation-color: var(--color-light-graphic-quaternary);
     --dropzone-active-cursor: pointer;
     --bottom-sheet-header-border-bottom: none;
     --bottom-sheet-footer-border-top: none;

package/themes/compiled/mobile-dark-bluetint.css

@@ -1,4 +1,23 @@
-.badge__component_13jfy.badge__background-accent_13jfy {
+.backdrop__backdrop_1d6xc {
+    -webkit-tap-highlight-color: transparent;
+} .backdrop__appear_1d6xc,
+.backdrop__enter_1d6xc {
+    background-color: transparent;
+} .backdrop__appearActive_1d6xc,
+.backdrop__enterActive_1d6xc,
+.backdrop__appearDone_1d6xc,
+.backdrop__enterDone_1d6xc {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exit_1d6xc {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exitActive_1d6xc,
+.backdrop__exitDone_1d6xc {
+    background-color: transparent;
+}.card-image__cardImage_1w4ef {
+    background: #e7e8ea;
+} .card-image__loaded_1w4ef {
+    background: transparent
+}.badge__component_13jfy.badge__background-accent_13jfy {
         background-color: #f83a2a;
         color: rgba(255, 255, 255, 0.94);
     } .badge__component_13jfy.badge__background-specialbg-secondary-transparent_13jfy {
@@ -58,25 +77,6 @@
         background-color: #fff;
     } .badge__dot_13jfy.badge__outlineCount_13jfy {
     border: 1px solid #121213;
-}.card-image__cardImage_1w4ef {
-    background: #e7e8ea;
-} .card-image__loaded_1w4ef {
-    background: transparent
-}.backdrop__backdrop_1d6xc {
-    -webkit-tap-highlight-color: transparent;
-} .backdrop__appear_1d6xc,
-.backdrop__enter_1d6xc {
-    background-color: transparent;
-} .backdrop__appearActive_1d6xc,
-.backdrop__enterActive_1d6xc,
-.backdrop__appearDone_1d6xc,
-.backdrop__enterDone_1d6xc {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exit_1d6xc {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exitActive_1d6xc,
-.backdrop__exitDone_1d6xc {
-    background-color: transparent;
 }.divider__component_qntq7 {
     border-bottom: 1px solid #353539;
 }.dropzone__component_jv68l {
@@ -168,14 +168,7 @@
         background: #fff;
     } .hatching-progress-bar__accent_1g4sq {
         background: #f83a2a;
-    }.icon-view__component_19x5k {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_19x5k {
-    fill: #1c1c1e;
-} .icon-view__border_19x5k {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-}.indicator__component_11fsk {
+    }.indicator__component_11fsk {
     color: rgba(255, 255, 255, 0.94);
     background-color: #f83a2a;
 } .indicator__red_11fsk {
@@ -193,7 +186,14 @@
     color: rgba(255, 255, 255, 0.94)
 } .indicator__grey_11fsk.indicator__border_11fsk {
         outline: 2px solid #121213;
-    }@keyframes loader__blink_1nz23 {
+    }.icon-view__component_19x5k {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_19x5k {
+    fill: #1c1c1e;
+} .icon-view__border_19x5k {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+}@keyframes loader__blink_1nz23 {
 }.link__primary_1tca1 {
     color: rgba(255, 255, 255, 0.94);
     border-bottom-color: rgba(255, 255, 255, 0.94)
@@ -290,35 +290,27 @@
             background-color: rgba(4, 4, 21, 0.47);
         }.skeleton__component_9mjjy {
     color: transparent;
-    background: rgba(214, 214, 229, 0.07)
+    background: rgba(214, 214, 229, 0.07);
 } .skeleton__component_9mjjy:before {
     background: transparent;
+} .skeleton__animate_9mjjy:after {
+    background-image: linear-gradient(
+        to left,
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0) 40%,
+        rgba(0, 0, 0, 0.05) 50%,
+        rgba(0, 0, 0, 0) 60%,
+        rgba(0, 0, 0, 0)
+    );
+} @keyframes skeleton__gradient_9mjjy {
 } @keyframes skeleton__background_9mjjy {
     0% {
-        background: rgba(214, 214, 229, 0.07);
+        background: rgb(182, 188, 195);
     }
     100% {
-        background: rgba(222, 222, 238, 0.13);
+        background: rgb(198, 205, 214);
     }
-}.slider__component_1qlg3 .noUi-base:hover .noUi-connects {
-            background: rgba(222, 222, 238, 0.13);
-        } .slider__component_1qlg3 .noUi-base:hover .noUi-connect {
-            background: #f83a2a;
-        } .slider__component_1qlg3 .noUi-handle:hover .noUi-touch-area {
-        background: #ff503e;
-    } .slider__component_1qlg3 .noUi-handle:active .noUi-touch-area {
-        background: #fd624e;
-    } .slider__component_1qlg3 .noUi-connects {
-        background: rgba(222, 222, 238, 0.13);
-    } .slider__component_1qlg3 .noUi-connect {
-        background: #f83a2a;
-    } .slider__component_1qlg3 .noUi-handle {
-        border: 2px solid transparent;
-    } .slider__component_1qlg3 .noUi-touch-area {
-        background: #f83a2a;
-    } .slider__component_1qlg3 .noUi-pips {
-        color: rgba(238, 238, 251, 0.55);
-    }.segmented-control__wrapper_97jjo {
+}.segmented-control__wrapper_97jjo {
     background-color: rgba(225, 225, 248, 0.09);
 } .segmented-control__segment_97jjo.segmented-control__selected_97jjo {
     color: rgba(255, 255, 255, 0.94);
@@ -352,6 +344,24 @@
     color: rgba(3, 3, 6, 0.88)
 } .segmented-control__segment_1ci04:not(:first-child):before {
         background-color: rgba(15, 25, 55, 0.1);
+    }.slider__component_1qlg3 .noUi-base:hover .noUi-connects {
+            background: rgba(222, 222, 238, 0.13);
+        } .slider__component_1qlg3 .noUi-base:hover .noUi-connect {
+            background: #f83a2a;
+        } .slider__component_1qlg3 .noUi-handle:hover .noUi-touch-area {
+        background: #ff503e;
+    } .slider__component_1qlg3 .noUi-handle:active .noUi-touch-area {
+        background: #fd624e;
+    } .slider__component_1qlg3 .noUi-connects {
+        background: rgba(222, 222, 238, 0.13);
+    } .slider__component_1qlg3 .noUi-connect {
+        background: #f83a2a;
+    } .slider__component_1qlg3 .noUi-handle {
+        border: 2px solid transparent;
+    } .slider__component_1qlg3 .noUi-touch-area {
+        background: #f83a2a;
+    } .slider__component_1qlg3 .noUi-pips {
+        color: rgba(238, 238, 251, 0.55);
     }.spinner__component_6d0oa {
     color: #fff;
 }
@@ -359,34 +369,6 @@
 }
 .spinner__component_11jun {
     color: #121213;
-}.status-badge__positive-checkmark_1qjlx {
-    background-color: #17d055;
-} .status-badge__negative-cross_1qjlx,
-.status-badge__negative-alert_1qjlx,
-.status-badge__negative-block_1qjlx {
-    background-color: #ff4837;
-} .status-badge__attention-alert_1qjlx {
-    background-color: #fda136;
-} .status-badge__neutral-information_1qjlx,
-.status-badge__neutral-operation_1qjlx,
-.status-badge__neutral-cross_1qjlx {
-    background-color: #898991;
-}
-.status-badge__component_75yw9 {
-    color: #fff;
-}
-.status-badge__positive-checkmark_yo7iy {
-    background-color: #0cc44d;
-} .status-badge__negative-cross_yo7iy,
-.status-badge__negative-alert_yo7iy,
-.status-badge__negative-block_yo7iy {
-    background-color: #ff4837;
-} .status-badge__attention-alert_yo7iy {
-    background-color: #fa9313;
-} .status-badge__neutral-information_yo7iy,
-.status-badge__neutral-operation_yo7iy,
-.status-badge__neutral-cross_yo7iy {
-    background-color: #898991;
 }.status__soft_1unag.status__green_1unag {
         background: #d1f1d7;
         color: #0d9336;
@@ -424,4 +406,171 @@
         background: #09b9be;
     } .status__contrast_1unag.status__purple_1unag {
         background: #897eff;
+    }.status-badge__positive-checkmark_1qjlx {
+    background-color: #17d055;
+} .status-badge__negative-cross_1qjlx,
+.status-badge__negative-alert_1qjlx,
+.status-badge__negative-block_1qjlx {
+    background-color: #ff4837;
+} .status-badge__attention-alert_1qjlx {
+    background-color: #fda136;
+} .status-badge__neutral-information_1qjlx,
+.status-badge__neutral-operation_1qjlx,
+.status-badge__neutral-cross_1qjlx {
+    background-color: #898991;
+}
+.status-badge__component_75yw9 {
+    color: #fff;
+}
+.status-badge__positive-checkmark_yo7iy {
+    background-color: #0cc44d;
+} .status-badge__negative-cross_yo7iy,
+.status-badge__negative-alert_yo7iy,
+.status-badge__negative-block_yo7iy {
+    background-color: #ff4837;
+} .status-badge__attention-alert_yo7iy {
+    background-color: #fa9313;
+} .status-badge__neutral-information_yo7iy,
+.status-badge__neutral-operation_yo7iy,
+.status-badge__neutral-cross_yo7iy {
+    background-color: #898991;
+}.underlay__background-accent_l4yds {
+            background-color: #ef3124;
+        } .underlay__background-info_l4yds {
+            background-color: #001c3c;
+        } .underlay__background-attention-muted_l4yds {
+            background-color: #36291f;
+        } .underlay__background-positive-muted_l4yds {
+            background-color: #232d25;
+        } .underlay__background-negative-muted_l4yds {
+            background-color: #392523;
+        } .underlay__background-primary_l4yds {
+            background-color: #0e0e0e;
+        } .underlay__background-primary-inverted_l4yds {
+            background-color: #fff;
+        } .underlay__background-secondary_l4yds {
+            background-color: #1c1c1e;
+        } .underlay__background-secondary-inverted_l4yds {
+            background-color: #f2f3f5;
+        } .underlay__background-tertiary_l4yds {
+            background-color: #27272a;
+        } .underlay__background-tertiary-inverted_l4yds {
+            background-color: #e7e8ea;
+        } .underlay__background-quaternary_l4yds {
+            background-color: #36363a;
+        } .underlay__background-quaternary-inverted_l4yds {
+            background-color: #dcdee2;
+        } .underlay__background-specialbg-component_l4yds {
+            background-color: rgba(255, 255, 255, 0.1);
+        } .underlay__background-specialbg-component-inverted_l4yds {
+            background-color: rgba(11, 31, 53, 0.07);
+        } .underlay__background-specialbg-primary-grouped_l4yds {
+            background-color: #1c1c1e;
+        } .underlay__background-specialbg-secondary-grouped_l4yds {
+            background-color: #27272a;
+        } .underlay__background-specialbg-tertiary-grouped_l4yds {
+            background-color: #36363a;
+        } .underlay__background-specialbg-secondary-transparent_l4yds {
+            background-color: rgba(214, 214, 229, 0.07);
+        } .underlay__background-specialbg-secondary-transparent-inverted_l4yds {
+            background-color: rgba(38, 55, 88, 0.06);
+        } .underlay__background-specialbg-tertiary-transparent_l4yds {
+            background-color: rgba(222, 222, 240, 0.12);
+        } .underlay__background-specialbg-tertiary-transparent-inverted_l4yds {
+            background-color: rgba(30, 43, 68, 0.08);
+        } .underlay__shadow-xs_l4yds {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-s_l4yds {
+        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+        0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-m_l4yds {
+        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-l_l4yds {
+        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-xl_l4yds {
+        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
+        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-xs-hard_l4yds {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-s-hard_l4yds {
+        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
+        0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-m-hard_l4yds {
+        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-hard_l4yds {
+        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
+        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xl-hard_l4yds {
+        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
+        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xs-up_l4yds {
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-s-up_l4yds {
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
+    } .underlay__shadow-m-up_l4yds {
+        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-up_l4yds {
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
+    } .underlay__shadow-xl-up_l4yds {
+        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
+    } .underlay__shadow-xs-hard-up_l4yds {
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
+        0 -2px 4px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-s-hard-up_l4yds {
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
+        0 -4px 8px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-m-hard-up_l4yds {
+        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
+        0 -8px 16px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-hard-up_l4yds {
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
+        0 -12px 24px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xl-hard-up_l4yds {
+        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
+        0 -16px 32px rgba(0, 0, 0, 0.16);
+    } .underlay__border-color-accent_l4yds {
+        border-color: #f83a2a;
+    } .underlay__border-color-key_l4yds {
+        border-color: #fff;
+    } .underlay__border-color-key-inverted_l4yds {
+        border-color: #121213;
+    } .underlay__border-color-link_l4yds {
+        border-color: #3193fc;
+    } .underlay__border-color-primary_l4yds {
+        border-color: #353539;
+    } .underlay__border-color-primary-inverted_l4yds {
+        border-color: #d2d3d9;
+    } .underlay__border-color-secondary_l4yds {
+        border-color: #29292c;
+    } .underlay__border-color-secondary-inverted_l4yds {
+        border-color: #e7e8eb;
+    } .underlay__border-color-tertiary_l4yds {
+        border-color: #212124;
+    } .underlay__border-color-tertiary-inverted_l4yds {
+        border-color: #edeef0;
+    } .underlay__border-color-underline_l4yds {
+        border-color: #4a4a51;
+    } .underlay__border-color-underline-inverted_l4yds {
+        border-color: #babbc2;
+    } .underlay__border-color-graphic-attention_l4yds {
+        border-color: #fda136;
+    } .underlay__border-color-graphic-link_l4yds {
+        border-color: #3193fc;
+    } .underlay__border-color-graphic-negative_l4yds {
+        border-color: #ff4837;
+    } .underlay__border-color-graphic-positive_l4yds {
+        border-color: #17d055;
+    } .underlay__border-color-specialbg-secondary-transparent_l4yds {
+        border-color: rgba(225, 225, 248, 0.09);
+    } .underlay__border-color-specialbg-secondary-transparent-inverted_l4yds {
+        border-color: rgba(30, 43, 68, 0.08);
+    } .underlay__border-color-specialbg-tertiary-transparent_l4yds {
+        border-color: rgba(222, 222, 238, 0.13);
+    } .underlay__border-color-specialbg-tertiary-transparent-inverted_l4yds {
+        border-color: rgba(15, 25, 55, 0.1);
     }

package/themes/mixins/click.css

@@ -8,6 +8,7 @@
 @import './modal/click.css';
 @import './toast-plate/click.css';
 @import './list/click.css';
+@import './skeleton/click.css';
 @import './dropzone/click.css';
 @import './bottom-sheet/click.css';
 @import './icon-button/click.css';
@@ -38,6 +39,7 @@
     @mixin modal-click;
     @mixin toast-plate-click;
     @mixin list-click;
+    @mixin skeleton-click;
     @mixin dropzone-click;
     @mixin bottom-sheet-click;
     @mixin icon-button-click;

package/themes/mixins/skeleton/click.css

@@ -0,0 +1,8 @@
+@define-mixin skeleton-click {
+    /* theme */
+    --skeleton-default-color: transparent;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-gradient-animation-display: none;
+    --skeleton-bg-animation-display: block;
+    --skeleton-bg-animation-color: var(--color-light-graphic-quaternary);
+}

package/themes/skeleton/click.css

@@ -0,0 +1,8 @@
+:root {
+    /* theme */
+    --skeleton-default-color: transparent;
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-gradient-animation-display: none;
+    --skeleton-bg-animation-display: block;
+    --skeleton-bg-animation-color: var(--color-light-graphic-quaternary);
+}

package/toast-plate/components/base-toast-plate/component.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
 import { HTMLAttributes, MouseEvent, ReactNode } from "react";
-import { StatusBadgeCustomIcon, StatusBadgeViews } from "../../../status-badge";
-import { unsafe_BadgeProps } from "./types/unsafeBadgeProps";
+type BadgeIcons = {
+    negative: JSX.Element;
+    positive: JSX.Element;
+    attention: JSX.Element;
+};
 type BaseToastPlateProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Дополнительный класс
@@ -31,7 +34,7 @@ type BaseToastPlateProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Вид бэйджа
      */
-    badge?: unsafe_BadgeProps | StatusBadgeViews;
+    badge?: 'negative' | 'positive' | 'attention';
     /**
      * Слот слева, заменяет стандартную иконку
      */
@@ -65,9 +68,9 @@ type BaseToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      */
     onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Функция, с помощью которой можно переопределить иконки в StatusBadge
+     * Функция, с помощью которой можно переопределить иконки в Badge
      */
-    getBadgeIcons?: StatusBadgeCustomIcon;
+    getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
     /**
      * Набор цветов для компонента
      */
@@ -111,7 +114,7 @@ declare const BaseToastPlate: React.ForwardRefExoticComponent<React.HTMLAttribut
     /**
      * Вид бэйджа
      */
-    badge?: StatusBadgeViews | unsafe_BadgeProps | undefined;
+    badge?: "attention" | "positive" | "negative" | undefined;
     /**
      * Слот слева, заменяет стандартную иконку
      */
@@ -145,9 +148,9 @@ declare const BaseToastPlate: React.ForwardRefExoticComponent<React.HTMLAttribut
      */
     onClose?: ((event?: MouseEvent<HTMLButtonElement>) => void) | undefined;
     /**
-     * Функция, с помощью которой можно переопределить иконки в StatusBadge
+     * Функция, с помощью которой можно переопределить иконки в Badge
      */
-    getBadgeIcons?: Partial<Record<StatusBadgeViews, Partial<Record<import("../../../status-badge").StatusBadgeSizes, import("../../../status-badge").StatusBadgeIcon>>>> | undefined;
+    getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
     /**
      * Набор цветов для компонента
      */
@@ -163,4 +166,4 @@ declare const BaseToastPlate: React.ForwardRefExoticComponent<React.HTMLAttribut
         [key: string]: string;
     } | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { BaseToastPlateProps, BaseToastPlate };
+export { BadgeIcons, BaseToastPlateProps, BaseToastPlate };

package/toast-plate/components/base-toast-plate/component.js

@@ -3,14 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsBadge = require('../../../badge');
 var coreComponentsIconButton = require('../../../icon-button');
-var getDataTestId = require('../../getDataTestId-439ac98c.js');
-require('@alfalab/hooks');
-var coreComponentsStatusBadge = require('../../../status-badge');
+var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
+var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
 var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
-var components_baseToastPlate_hooks_useCustomIcons = require('./hooks/useCustomIcons.js');
-var components_baseToastPlate_hooks_useDeprecatedBadge = require('./hooks/useDeprecatedBadge.js');
-var components_baseToastPlate_utils_isUnsafeBadge = require('./utils/isUnsafeBadge.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -30,27 +28,27 @@ var colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
+var iconDefaultComponents = {
+    negative: React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: commonStyles.badgeIcon }),
+    positive: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: commonStyles.badgeIcon }),
+    attention: React__default.default.createElement(AlertCircleMIcon.AlertCircleMIcon, { className: commonStyles.badgeIcon }),
+};
 var BaseToastPlate = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, closerWrapperClassName = _a.closerWrapperClassName, closerClassName = _a.closerClassName, _f = _a.bottomButtonPosition, bottomButtonPosition = _f === void 0 ? false : _f, _g = _a.styles, styles = _g === void 0 ? {} : _g, restProps = tslib.__rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors", "closerWrapperClassName", "closerClassName", "bottomButtonPosition", "styles"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
-    var transformDeprecatedBadge = components_baseToastPlate_hooks_useDeprecatedBadge.useDeprecatedBadge().transformDeprecatedBadge;
-    var getCustomIcons = components_baseToastPlate_hooks_useCustomIcons.useCustomIcons().getCustomIcons;
+    var iconComponents = getBadgeIcons
+        ? getBadgeIcons(iconDefaultComponents)
+        : iconDefaultComponents;
     var handleClose = React.useCallback(function (event) {
         if (onClose) {
             onClose(event);
         }
     }, [onClose]);
-    var statusBadgeView = badge;
-    if (badge && components_baseToastPlate_utils_isUnsafeBadge.isUnsafeBadge(badge)) {
-        statusBadgeView = transformDeprecatedBadge(badge);
-    }
-    var customIcons = getCustomIcons(getBadgeIcons);
-    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(commonStyles.component, colorStyles[colors].component, (_b = {}, _b[commonStyles.block] = block, _b[commonStyles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'component') }, restProps),
+    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(commonStyles.component, colorStyles[colors].component, (_b = {}, _b[commonStyles.block] = block, _b[commonStyles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
         React__default.default.createElement("div", { className: commonStyles.wrapper },
             React__default.default.createElement("div", { className: commonStyles.contentWrapper },
-                needRenderLeftAddons && (React__default.default.createElement("div", { className: commonStyles.leftAddons }, leftAddons ||
-                    (badge && (React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, tslib.__assign({ view: statusBadgeView, dataTestId: getDataTestId.getDataTestId(dataTestId, 'badge') }, (customIcons && { customIcons: customIcons }))))))),
+                needRenderLeftAddons && (React__default.default.createElement("div", { className: commonStyles.leftAddons }, leftAddons || (React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', content: badge && iconComponents[badge], iconColor: badge, className: commonStyles.badge, dataTestId: 'badge', visibleColorOutline: true })))),
                 React__default.default.createElement("div", { className: cn__default.default(contentClassName, commonStyles.content, (_c = {},
                         _c[commonStyles.hasCloser] = hasCloser,
                         _c[commonStyles.hasActionButton] = !!actionButton,