@salutejs/plasma-web 1.600.0-canary.2260.19623998307.0 → 1.600.0-canary.2299.19662256003.0

package/css/index.d.ts

@@ -9,6 +9,7 @@ export * from '../components/Button';
 export * from '../components/ButtonBase';
 export * from '../components/ButtonGroup';
 export * from '../components/Calendar';
+export * from '../components/Card';
 export * from '../components/Carousel';
 export * from '../components/Cell';
 export * from '../components/Checkbox';
@@ -36,6 +37,7 @@ export * from '../components/InformationWrapper';
 export * from '../components/Link';
 export * from '../components/LinkButton';
 export * from '../components/List';
+export * from '../components/Loader';
 export * from '../components/Mask';
 export * from '../components/ModalBase';
 export * from '../components/NavigationDrawer';
@@ -90,6 +92,7 @@ export * from '../components/Button';
 export * from '../components/ButtonBase';
 export * from '../components/ButtonGroup';
 export * from '../components/Calendar';
+export * from '../components/Card';
 export * from '../components/Carousel';
 export * from '../components/Cell';
 export * from '../components/Checkbox';
@@ -117,6 +120,7 @@ export * from '../components/InformationWrapper';
 export * from '../components/Link';
 export * from '../components/LinkButton';
 export * from '../components/List';
+export * from '../components/Loader';
 export * from '../components/Mask';
 export * from '../components/ModalBase';
 export * from '../components/NavigationDrawer';

package/es/components/Card/Card.config.js

@@ -0,0 +1,76 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-solid-card);\n            "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.75rem;\n                ",
+        ": 0.0625rem;\n                ",
+        ": 1rem;\n                ",
+        ": 0.5rem;\n            "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.625rem;\n                ",
+        ": 0.0625rem;\n                ",
+        ": 0.875rem;\n                ",
+        ": 0.375rem;\n            "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.5rem;\n                ",
+        ": 0.0625rem;\n                ",
+        ": 0.75rem;\n                ",
+        ": 0.375rem;\n            "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css(_templateObject(), tokens.solidBackground)
+        },
+        size: {
+            l: css(_templateObject1(), tokens.outlineWidth, tokens.borderWidth, tokens.borderRadius, tokens.contentBorderRadius),
+            m: css(_templateObject2(), tokens.outlineWidth, tokens.borderWidth, tokens.borderRadius, tokens.contentBorderRadius),
+            s: css(_templateObject3(), tokens.outlineWidth, tokens.borderWidth, tokens.borderRadius, tokens.contentBorderRadius)
+        }
+    }
+};

package/es/components/Card/Card.js

@@ -0,0 +1,8 @@
+import { cardConfig, CardContent, CardInnerContent, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Card.config';
+var mergedConfig = mergeConfig(cardConfig, config);
+var CardComponent = component(mergedConfig);
+/**
+ * Компонент Card.
+ */ export var Card = CardComponent;
+export { CardContent, CardInnerContent };

package/es/components/Card/index.js

@@ -1,5 +1 @@
-export { Card, StyledCard } from '@salutejs/plasma-hope';
-export { CardBadge } from '@salutejs/plasma-hope';
-export { CardBody } from '@salutejs/plasma-hope';
-export { CardContent } from '@salutejs/plasma-hope';
-export { CardMedia } from '@salutejs/plasma-hope';
+export { Card, CardContent, CardInnerContent } from './Card';

package/es/components/LinkButton/LinkButton.config.js

@@ -18,7 +18,8 @@ function _templateObject() {
         ": var(--text-primary-hover);\n                ",
         ": var(--text-primary-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-primary-hover);\n            "
+        ": var(--text-primary-hover);\n                ",
+        ": var(--text-primary-active);\n            "
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -35,7 +36,8 @@ function _templateObject1() {
         ": var(--text-accent-hover);\n                ",
         ": var(--text-accent-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-accent-hover);\n            "
+        ": var(--text-accent-hover);\n                ",
+        ": var(--text-accent-active);\n            "
     ]);
     _templateObject1 = function _templateObject() {
         return data;
@@ -52,7 +54,8 @@ function _templateObject2() {
         ": var(--text-secondary-hover);\n                ",
         ": var(--text-secondary-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-secondary-hover);\n            "
+        ": var(--text-secondary-hover);\n                ",
+        ": var(--text-secondary-active);\n            "
     ]);
     _templateObject2 = function _templateObject() {
         return data;
@@ -69,7 +72,8 @@ function _templateObject3() {
         ": var(--text-positive-hover);\n                ",
         ": var(--text-positive-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-positive-hover);\n            "
+        ": var(--text-positive-hover);\n                ",
+        ": var(--text-positive-active);\n            "
     ]);
     _templateObject3 = function _templateObject() {
         return data;
@@ -86,7 +90,8 @@ function _templateObject4() {
         ": var(--text-warning-hover);\n                ",
         ": var(--text-warning-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-warning-hover);\n            "
+        ": var(--text-warning-hover);\n                ",
+        ": var(--text-warning-active);\n            "
     ]);
     _templateObject4 = function _templateObject() {
         return data;
@@ -103,7 +108,8 @@ function _templateObject5() {
         ": var(--text-negative-hover);\n                ",
         ": var(--text-negative-active);\n                ",
         ": var(--surface-accent);\n                ",
-        ": var(--text-negative-hover);\n            "
+        ": var(--text-negative-hover);\n                ",
+        ": var(--text-negative-active);\n            "
     ]);
     _templateObject5 = function _templateObject() {
         return data;
@@ -271,12 +277,12 @@ export var config = {
     },
     variations: {
         view: {
-            default: css(_templateObject(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
-            accent: css(_templateObject1(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
-            secondary: css(_templateObject2(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
-            positive: css(_templateObject3(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
-            warning: css(_templateObject4(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover),
-            negative: css(_templateObject5(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover)
+            default: css(_templateObject(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
+            accent: css(_templateObject1(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
+            secondary: css(_templateObject2(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
+            positive: css(_templateObject3(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
+            warning: css(_templateObject4(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive),
+            negative: css(_templateObject5(), linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonIconColor, linkButtonTokens.linkButtonTextColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonTextColorHover, linkButtonTokens.linkButtonTextColorActive)
         },
         size: {
             xl: css(_templateObject6(), linkButtonTokens.linkButtonHeight, linkButtonTokens.linkButtonPadding, linkButtonTokens.linkButtonRadius, linkButtonTokens.linkButtonFontFamily, linkButtonTokens.linkButtonFontSize, linkButtonTokens.linkButtonFontStyle, linkButtonTokens.linkButtonFontWeight, linkButtonTokens.linkButtonLetterSpacing, linkButtonTokens.linkButtonLineHeight, linkButtonTokens.linkButtonSpinnerSize, linkButtonTokens.linkButtonSpinnerColor, linkButtonTokens.linkButtonTextPadding, linkButtonTokens.linkButtonLeftContentMargin, linkButtonTokens.linkButtonRightContentMargin, linkButtonTokens.linkButtonAdditionalContentMargin),

package/es/components/Loader/Loader.config.js

@@ -0,0 +1,296 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-solid-default);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-transparent-secondary);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-secondary);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-accent);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-accent);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-positive);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-positive);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-warning);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-warning);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-negative);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-negative);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--surface-transparent-tertiary);\n                ",
+        ": var(--surface-info);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": var(--text-info);\n\n                ",
+        ": var(--overlay-soft);\n            "
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 128;\n                ",
+        ": 8rem;\n                ",
+        ": 8rem;\n                ",
+        ": 0.25rem;\n                ",
+        ": 4;\n                ",
+        ": var(--plasma-typo-h2-font-family);\n                ",
+        ": var(--plasma-typo-h2-font-size);\n                ",
+        ": var(--plasma-typo-h2-font-style);\n                ",
+        ": var(--plasma-typo-h2-bold-font-weight);\n                ",
+        ": var(--plasma-typo-h2-letter-spacing);\n                ",
+        ": var(--plasma-typo-h2-line-height);\n\n                ",
+        ": 8rem;\n            "
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 88;\n                ",
+        ": 5.5rem;\n                ",
+        ": 5.5rem;\n                ",
+        ": 0.25rem;\n                ",
+        ": 4;\n                ",
+        ": var(--plasma-typo-h5-font-family);\n                ",
+        ": var(--plasma-typo-h5-font-size);\n                ",
+        ": var(--plasma-typo-h5-font-style);\n                ",
+        ": var(--plasma-typo-h5-bold-font-weight);\n                ",
+        ": var(--plasma-typo-h5-letter-spacing);\n                ",
+        ": var(--plasma-typo-h5-line-height);\n\n                ",
+        ": 5.5rem;\n            "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 56;\n                ",
+        ": 3.5rem;\n                ",
+        ": 3.5rem;\n                ",
+        ": 0.125rem;\n                ",
+        ": 2;\n                ",
+        ": var(--plasma-typo-body-l-font-family);\n                ",
+        ": var(--plasma-typo-body-l-font-size);\n                ",
+        ": var(--plasma-typo-body-l-font-style);\n                ",
+        ": var(--plasma-typo-body-l-body-font-weight);\n                ",
+        ": var(--plasma-typo-body-l-letter-spacing);\n                ",
+        ": var(--plasma-typo-body-l-line-height);\n\n                ",
+        ": 3.5rem;\n            "
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 48;\n                ",
+        ": 3rem;\n                ",
+        ": 3rem;\n                ",
+        ": 0.125rem;\n                ",
+        ": 2;\n                ",
+        ": var(--plasma-typo-body-m-font-family);\n                ",
+        ": var(--plasma-typo-body-m-font-size);\n                ",
+        ": var(--plasma-typo-body-m-font-style);\n                ",
+        ": var(--plasma-typo-body-m-body-font-weight);\n                ",
+        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
+        ": var(--plasma-typo-body-m-line-height);\n\n                ",
+        ": 3rem;\n            "
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 32;\n                ",
+        ": 2.25rem;\n                ",
+        ": 2.25rem;\n                ",
+        ": 0.125rem;\n                ",
+        ": 2;\n                ",
+        ": var(--plasma-typo-body-s-font-family);\n                ",
+        ": var(--plasma-typo-body-s-font-size);\n                ",
+        ": var(--plasma-typo-body-s-font-style);\n                ",
+        ": var(--plasma-typo-body-s-body-font-weight);\n                ",
+        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
+        ": var(--plasma-typo-body-s-line-height);\n\n                ",
+        ": 2.25rem;\n            "
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 24;\n                ",
+        ": 1.5rem;\n                ",
+        ": 1.5rem;\n                ",
+        ": 0.125rem;\n                ",
+        ": 2;\n                ",
+        ": var(--plasma-typo-body-xs-font-family);\n                ",
+        ": var(--plasma-typo-body-xs-font-size);\n                ",
+        ": var(--plasma-typo-body-xs-font-style);\n                ",
+        ": var(--plasma-typo-body-xs-body-font-weight);\n                ",
+        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
+        ": var(--plasma-typo-body-xs-line-height);\n\n                ",
+        ": 1.5rem;\n            "
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 100%;\n                ",
+        ": 100%;\n\n                ",
+        ": 16;\n                ",
+        ": 1rem;\n                ",
+        ": 1rem;\n                ",
+        ": 0.125rem;\n                ",
+        ": 2;\n                ",
+        ": var(--plasma-typo-body-xxs-font-family);\n                ",
+        ": var(--plasma-typo-body-xxs-font-size);\n                ",
+        ": var(--plasma-typo-body-xxs-font-style);\n                ",
+        ": var(--plasma-typo-body-xxs-body-font-weight);\n                ",
+        ": var(--plasma-typo-body-xxs-letter-spacing);\n                ",
+        ": var(--plasma-typo-body-xxs-line-height);\n\n                ",
+        ": 1rem;\n            "
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components';
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css(_templateObject(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            secondary: css(_templateObject1(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            accent: css(_templateObject2(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            positive: css(_templateObject3(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            warning: css(_templateObject4(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            negative: css(_templateObject5(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor),
+            info: css(_templateObject6(), loaderTokens.progressBarCircularBackgroundStroke, loaderTokens.progressBarCircularStroke, loaderTokens.progressBarCircularContentColor, loaderTokens.spinnerColor, loaderTokens.overlayColor)
+        },
+        size: {
+            xxl: css(_templateObject7(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            xl: css(_templateObject8(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            l: css(_templateObject9(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            m: css(_templateObject10(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            s: css(_templateObject11(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            xs: css(_templateObject12(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize),
+            xxs: css(_templateObject13(), loaderTokens.width, loaderTokens.height, loaderTokens.progressBarCircularSize, loaderTokens.progressBarCircularHeight, loaderTokens.progressBarCircularWidth, loaderTokens.progressBarCircularStrokeWidth, loaderTokens.progressBarCircularStrokeSize, loaderTokens.progressBarCircularContentFontFamily, loaderTokens.progressBarCircularContentFontSize, loaderTokens.progressBarCircularContentFontStyle, loaderTokens.progressBarCircularContentFontWeight, loaderTokens.progressBarCircularContentLetterSpacing, loaderTokens.progressBarCircularContentLineHeight, loaderTokens.spinnerSize)
+        }
+    }
+};

package/es/components/Loader/Loader.js

@@ -0,0 +1,4 @@
+import { loaderConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Loader.config';
+var mergedConfig = mergeConfig(loaderConfig, config);
+export var Loader = component(mergedConfig);

package/es/components/Loader/index.js

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/es/index.js

@@ -91,3 +91,4 @@ export * from './components/NavigationDrawer';
 export * from './components/TimePicker';
 export * from './components/ProgressBarCircular';
 export * from './components/DateTimePicker';
+export * from './components/Loader';

package/index.d.ts

@@ -91,3 +91,4 @@ export * from './components/NavigationDrawer';
 export * from './components/TimePicker';
 export * from './components/ProgressBarCircular';
 export * from './components/DateTimePicker';
+export * from './components/Loader';

package/index.js

@@ -95,6 +95,7 @@ _export_star(require("./components/NavigationDrawer"), exports);
 _export_star(require("./components/TimePicker"), exports);
 _export_star(require("./components/ProgressBarCircular"), exports);
 _export_star(require("./components/DateTimePicker"), exports);
+_export_star(require("./components/Loader"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-web",
-  "version": "1.600.0-canary.2260.19623998307.0",
+  "version": "1.600.0-canary.2299.19662256003.0",
   "description": "Salute Design System / React UI kit for web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -19,9 +19,9 @@
     "directory": "packages/plasma-web"
   },
   "dependencies": {
-    "@salutejs/plasma-core": "1.210.0-canary.2260.19623998307.0",
-    "@salutejs/plasma-hope": "1.356.0-canary.2260.19623998307.0",
-    "@salutejs/plasma-new-hope": "0.342.0-canary.2260.19623998307.0",
+    "@salutejs/plasma-core": "1.210.0-canary.2299.19662256003.0",
+    "@salutejs/plasma-hope": "1.356.0-canary.2299.19662256003.0",
+    "@salutejs/plasma-new-hope": "0.342.0-canary.2299.19662256003.0",
     "@salutejs/plasma-themes": "0.38.0",
     "@salutejs/plasma-tokens-b2b": "1.54.0",
     "@salutejs/plasma-tokens-b2c": "0.65.0",
@@ -49,9 +49,9 @@
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@salutejs/plasma-colors": "0.16.0",
-    "@salutejs/plasma-cy-utils": "0.140.0-canary.2260.19623998307.0",
-    "@salutejs/plasma-icons": "1.226.0",
-    "@salutejs/plasma-sb-utils": "0.210.0-canary.2260.19623998307.0",
+    "@salutejs/plasma-cy-utils": "0.140.0-canary.2299.19662256003.0",
+    "@salutejs/plasma-icons": "1.227.0-canary.2299.19662256003.0",
+    "@salutejs/plasma-sb-utils": "0.210.0-canary.2299.19662256003.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
     "@storybook/manager-api": "8.6.14",
@@ -111,5 +111,5 @@
     "Fanil Zubairov"
   ],
   "sideEffects": false,
-  "gitHead": "22798a5473112083157ee0a0e2500406ba5afe99"
+  "gitHead": "457b422caedff92c0f8b58b559a000e4b77a4f48"
 }