npm - @alfalab/core-components - Versions diffs - 46.0.0-beta.5 → 46.0.0-beta.7 - Mend

@alfalab/core-components 46.0.0-beta.5 → 46.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (456) hide show

package/status/cssm/index.module.css CHANGED Viewed

@@ -1,6 +1,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -29,6 +30,12 @@
     --color-light-decorative-muted-alt-orange: #fde6c8;
     --color-light-decorative-muted-alt-red: #ffdfdf;
     --color-light-decorative-muted-alt-teal: #c8f1f3;
+    --color-light-decorative-muted-blue: #e4f0ff;
+    --color-light-decorative-muted-green: #dff8e5;
+    --color-light-decorative-muted-indigo: #eeedff;
+    --color-light-decorative-muted-orange: #ffefd9;
+    --color-light-decorative-muted-red: #ffebeb;
+    --color-light-decorative-muted-teal: #daf7f8;
     --color-light-decorative-orange: #fa9313;
     --color-light-decorative-red: #fe5e48;
     --color-light-decorative-teal: #09b9be;
@@ -60,41 +67,79 @@
         word-break: break-all;
     } .component:empty {
         padding: 0;
-    } .soft.green {
-        background: var(--color-light-decorative-muted-alt-green);
-        color: var(--color-light-decorative-text-green);
-    } .soft.orange {
-        background: var(--color-light-decorative-muted-alt-orange);
-        color: var(--color-light-decorative-text-orange);
-    } .soft.red {
-        background: var(--color-light-decorative-muted-alt-red);
-        color: var(--color-light-decorative-text-red);
-    } .soft.blue {
-        background: var(--color-light-decorative-muted-alt-blue);
-        color: var(--color-light-decorative-text-blue);
-    } .soft.grey {
+    } .muted-alt {
+        &.green {
+            background: var(--color-light-decorative-muted-alt-green);
+            color: var(--color-light-decorative-text-green);
+        }
+        &.orange {
+            background: var(--color-light-decorative-muted-alt-orange);
+            color: var(--color-light-decorative-text-orange);
+        }
+        &.red {
+            background: var(--color-light-decorative-muted-alt-red);
+            color: var(--color-light-decorative-text-red);
+        }
+        &.blue {
+            background: var(--color-light-decorative-muted-alt-blue);
+            color: var(--color-light-decorative-text-blue);
+        }
+        &.teal {
+            background: var(--color-light-decorative-muted-alt-teal);
+            color: var(--color-light-decorative-text-teal);
+        }
+} .muted-alt.grey {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .soft.teal {
-        background: var(--color-light-decorative-muted-alt-teal);
-        color: var(--color-light-decorative-text-teal);
-    } .soft.purple {
+    } .muted-alt.purple {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
     } .contrast {
-    color: var(--color-light-text-primary-inverted)
-} .contrast.green {
-        background: var(--color-light-decorative-green);
-    } .contrast.orange {
-        background: var(--color-light-decorative-orange);
-    } .contrast.red {
-        background: var(--color-light-decorative-red);
-    } .contrast.blue {
-        background: var(--color-light-decorative-blue);
-    } .contrast.grey {
+    color: var(--color-light-text-primary-inverted);
+        &.green {
+            background: var(--color-light-decorative-green);
+        }
+        &.orange {
+            background: var(--color-light-decorative-orange);
+        }
+        &.red {
+            background: var(--color-light-decorative-red);
+        }
+        &.blue {
+            background: var(--color-light-decorative-blue);
+        }
+        &.teal {
+            background: var(--color-light-decorative-teal);
+        }
+} .contrast.grey {
         background: var(--color-light-neutral-700);
-    } .contrast.teal {
-        background: var(--color-light-decorative-teal);
     } .contrast.purple {
         background: var(--color-light-decorative-indigo);
+    } .muted {
+        &.green {
+            background: var(--color-light-decorative-muted-green);
+            color: var(--color-light-decorative-text-green);
+        }
+        &.orange {
+            background: var(--color-light-decorative-muted-orange);
+            color: var(--color-light-decorative-text-orange);
+        }
+        &.red {
+            background: var(--color-light-decorative-muted-red);
+            color: var(--color-light-decorative-text-red);
+        }
+        &.blue {
+            background: var(--color-light-decorative-muted-blue);
+            color: var(--color-light-decorative-text-blue);
+        }
+        &.teal {
+            background: var(--color-light-decorative-muted-teal);
+            color: var(--color-light-decorative-text-teal);
+        }
+} .muted.grey {
+        background: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-secondary);
+    } .muted.purple {
+        background: var(--color-light-decorative-muted-indigo);
+        color: var(--color-light-decorative-text-indigo);
     }

package/status/esm/Component.d.ts CHANGED Viewed

@@ -7,8 +7,9 @@ type StatusProps = {
     className?: string;
     /**
      *  Вид компонента
+     * @description soft deprecated, используйте вместо него muted-alt
      */
-    view?: 'contrast' | 'soft';
+    view?: 'contrast' | 'soft' | 'muted' | 'muted-alt';
     /**
      * Цветовое оформление иконки
      */

package/status/esm/Component.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
-var styles = {"component":"status__component_1keqd","ellipsis":"status__ellipsis_1keqd","soft":"status__soft_1keqd","green":"status__green_1keqd","orange":"status__orange_1keqd","red":"status__red_1keqd","blue":"status__blue_1keqd","grey":"status__grey_1keqd","teal":"status__teal_1keqd","purple":"status__purple_1keqd","contrast":"status__contrast_1keqd"};
+var styles = {"component":"status__component_1keqd","ellipsis":"status__ellipsis_1keqd","muted-alt":"status__muted-alt_1keqd","green":"status__green_1keqd","orange":"status__orange_1keqd","red":"status__red_1keqd","blue":"status__blue_1keqd","teal":"status__teal_1keqd","grey":"status__grey_1keqd","purple":"status__purple_1keqd","contrast":"status__contrast_1keqd","muted":"status__muted_1keqd"};
 require('./index.css');
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
 var Status = function (_a) {
-    var className = _a.className, _b = _a.view, view = _b === void 0 ? 'soft' : _b, _c = _a.color, color = _c === void 0 ? 'green' : _c, children = _a.children, dataTestId = _a.dataTestId;
+    var className = _a.className, _b = _a.view, view = _b === void 0 ? 'muted-alt' : _b, _c = _a.color, color = _c === void 0 ? 'green' : _c, children = _a.children, dataTestId = _a.dataTestId;
     return (React.createElement("span", { className: cn(styles.component, styles[color], styles[view], className), "data-test-id": dataTestId },
         React.createElement("span", { className: styles.ellipsis }, children)));
 };

package/status/esm/index.css CHANGED Viewed

@@ -2,6 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,6 +31,12 @@
     --color-light-decorative-muted-alt-orange: #fde6c8;
     --color-light-decorative-muted-alt-red: #ffdfdf;
     --color-light-decorative-muted-alt-teal: #c8f1f3;
+    --color-light-decorative-muted-blue: #e4f0ff;
+    --color-light-decorative-muted-green: #dff8e5;
+    --color-light-decorative-muted-indigo: #eeedff;
+    --color-light-decorative-muted-orange: #ffefd9;
+    --color-light-decorative-muted-red: #ffebeb;
+    --color-light-decorative-muted-teal: #daf7f8;
     --color-light-decorative-orange: #fa9313;
     --color-light-decorative-red: #fe5e48;
     --color-light-decorative-teal: #09b9be;
@@ -61,41 +68,62 @@
         word-break: break-all;
     } .status__component_1keqd:empty {
         padding: 0;
-    } .status__soft_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-muted-alt-green);
-        color: var(--color-light-decorative-text-green);
-    } .status__soft_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-muted-alt-orange);
-        color: var(--color-light-decorative-text-orange);
-    } .status__soft_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-muted-alt-red);
-        color: var(--color-light-decorative-text-red);
-    } .status__soft_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-muted-alt-blue);
-        color: var(--color-light-decorative-text-blue);
-    } .status__soft_1keqd.status__grey_1keqd {
+    } .status__muted-alt_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-alt-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted-alt_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-alt-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted-alt_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-alt-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted-alt_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-alt-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted-alt_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-alt-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted-alt_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-muted-alt-teal);
-        color: var(--color-light-decorative-text-teal);
-    } .status__soft_1keqd.status__purple_1keqd {
+    } .status__muted-alt_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
     } .status__contrast_1keqd {
     color: var(--color-light-text-primary-inverted)
 } .status__contrast_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-green);
-    } .status__contrast_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-orange);
-    } .status__contrast_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-red);
-    } .status__contrast_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-blue);
-    } .status__contrast_1keqd.status__grey_1keqd {
+            background: var(--color-light-decorative-green);
+        } .status__contrast_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-orange);
+        } .status__contrast_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-red);
+        } .status__contrast_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-blue);
+        } .status__contrast_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-teal);
+        } .status__contrast_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-700);
-    } .status__contrast_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-teal);
     } .status__contrast_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-indigo);
+    } .status__muted_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted_1keqd.status__grey_1keqd {
+        background: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-secondary);
+    } .status__muted_1keqd.status__purple_1keqd {
+        background: var(--color-light-decorative-muted-indigo);
+        color: var(--color-light-decorative-text-indigo);
     }

package/status/index.css CHANGED Viewed

@@ -2,6 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,6 +31,12 @@
     --color-light-decorative-muted-alt-orange: #fde6c8;
     --color-light-decorative-muted-alt-red: #ffdfdf;
     --color-light-decorative-muted-alt-teal: #c8f1f3;
+    --color-light-decorative-muted-blue: #e4f0ff;
+    --color-light-decorative-muted-green: #dff8e5;
+    --color-light-decorative-muted-indigo: #eeedff;
+    --color-light-decorative-muted-orange: #ffefd9;
+    --color-light-decorative-muted-red: #ffebeb;
+    --color-light-decorative-muted-teal: #daf7f8;
     --color-light-decorative-orange: #fa9313;
     --color-light-decorative-red: #fe5e48;
     --color-light-decorative-teal: #09b9be;
@@ -61,41 +68,62 @@
         word-break: break-all;
     } .status__component_1keqd:empty {
         padding: 0;
-    } .status__soft_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-muted-alt-green);
-        color: var(--color-light-decorative-text-green);
-    } .status__soft_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-muted-alt-orange);
-        color: var(--color-light-decorative-text-orange);
-    } .status__soft_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-muted-alt-red);
-        color: var(--color-light-decorative-text-red);
-    } .status__soft_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-muted-alt-blue);
-        color: var(--color-light-decorative-text-blue);
-    } .status__soft_1keqd.status__grey_1keqd {
+    } .status__muted-alt_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-alt-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted-alt_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-alt-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted-alt_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-alt-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted-alt_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-alt-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted-alt_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-alt-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted-alt_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-muted-alt-teal);
-        color: var(--color-light-decorative-text-teal);
-    } .status__soft_1keqd.status__purple_1keqd {
+    } .status__muted-alt_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
     } .status__contrast_1keqd {
     color: var(--color-light-text-primary-inverted)
 } .status__contrast_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-green);
-    } .status__contrast_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-orange);
-    } .status__contrast_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-red);
-    } .status__contrast_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-blue);
-    } .status__contrast_1keqd.status__grey_1keqd {
+            background: var(--color-light-decorative-green);
+        } .status__contrast_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-orange);
+        } .status__contrast_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-red);
+        } .status__contrast_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-blue);
+        } .status__contrast_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-teal);
+        } .status__contrast_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-700);
-    } .status__contrast_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-teal);
     } .status__contrast_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-indigo);
+    } .status__muted_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted_1keqd.status__grey_1keqd {
+        background: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-secondary);
+    } .status__muted_1keqd.status__purple_1keqd {
+        background: var(--color-light-decorative-muted-indigo);
+        color: var(--color-light-decorative-text-indigo);
     }

package/status/modern/Component.d.ts CHANGED Viewed

@@ -7,8 +7,9 @@ type StatusProps = {
     className?: string;
     /**
      *  Вид компонента
+     * @description soft deprecated, используйте вместо него muted-alt
      */
-    view?: 'contrast' | 'soft';
+    view?: 'contrast' | 'soft' | 'muted' | 'muted-alt';
     /**
      * Цветовое оформление иконки
      */

package/status/modern/Component.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import React from 'react';
 import cn from 'classnames';
-const styles = {"component":"status__component_1keqd","ellipsis":"status__ellipsis_1keqd","soft":"status__soft_1keqd","green":"status__green_1keqd","orange":"status__orange_1keqd","red":"status__red_1keqd","blue":"status__blue_1keqd","grey":"status__grey_1keqd","teal":"status__teal_1keqd","purple":"status__purple_1keqd","contrast":"status__contrast_1keqd"};
+const styles = {"component":"status__component_1keqd","ellipsis":"status__ellipsis_1keqd","muted-alt":"status__muted-alt_1keqd","green":"status__green_1keqd","orange":"status__orange_1keqd","red":"status__red_1keqd","blue":"status__blue_1keqd","teal":"status__teal_1keqd","grey":"status__grey_1keqd","purple":"status__purple_1keqd","contrast":"status__contrast_1keqd","muted":"status__muted_1keqd"};
 require('./index.css');
 const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
-const Status = ({ className, view = 'soft', color = 'green', children, dataTestId, }) => (React.createElement("span", { className: cn(styles.component, styles[color], styles[view], className), "data-test-id": dataTestId },
+const Status = ({ className, view = 'muted-alt', color = 'green', children, dataTestId, }) => (React.createElement("span", { className: cn(styles.component, styles[color], styles[view], className), "data-test-id": dataTestId },
     React.createElement("span", { className: styles.ellipsis }, children)));
 export { Status, colors };

package/status/modern/index.css CHANGED Viewed

@@ -2,6 +2,7 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,6 +31,12 @@
     --color-light-decorative-muted-alt-orange: #fde6c8;
     --color-light-decorative-muted-alt-red: #ffdfdf;
     --color-light-decorative-muted-alt-teal: #c8f1f3;
+    --color-light-decorative-muted-blue: #e4f0ff;
+    --color-light-decorative-muted-green: #dff8e5;
+    --color-light-decorative-muted-indigo: #eeedff;
+    --color-light-decorative-muted-orange: #ffefd9;
+    --color-light-decorative-muted-red: #ffebeb;
+    --color-light-decorative-muted-teal: #daf7f8;
     --color-light-decorative-orange: #fa9313;
     --color-light-decorative-red: #fe5e48;
     --color-light-decorative-teal: #09b9be;
@@ -61,41 +68,62 @@
         word-break: break-all;
     } .status__component_1keqd:empty {
         padding: 0;
-    } .status__soft_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-muted-alt-green);
-        color: var(--color-light-decorative-text-green);
-    } .status__soft_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-muted-alt-orange);
-        color: var(--color-light-decorative-text-orange);
-    } .status__soft_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-muted-alt-red);
-        color: var(--color-light-decorative-text-red);
-    } .status__soft_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-muted-alt-blue);
-        color: var(--color-light-decorative-text-blue);
-    } .status__soft_1keqd.status__grey_1keqd {
+    } .status__muted-alt_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-alt-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted-alt_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-alt-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted-alt_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-alt-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted-alt_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-alt-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted-alt_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-alt-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted-alt_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-muted-alt-teal);
-        color: var(--color-light-decorative-text-teal);
-    } .status__soft_1keqd.status__purple_1keqd {
+    } .status__muted-alt_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
     } .status__contrast_1keqd {
     color: var(--color-light-text-primary-inverted)
 } .status__contrast_1keqd.status__green_1keqd {
-        background: var(--color-light-decorative-green);
-    } .status__contrast_1keqd.status__orange_1keqd {
-        background: var(--color-light-decorative-orange);
-    } .status__contrast_1keqd.status__red_1keqd {
-        background: var(--color-light-decorative-red);
-    } .status__contrast_1keqd.status__blue_1keqd {
-        background: var(--color-light-decorative-blue);
-    } .status__contrast_1keqd.status__grey_1keqd {
+            background: var(--color-light-decorative-green);
+        } .status__contrast_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-orange);
+        } .status__contrast_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-red);
+        } .status__contrast_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-blue);
+        } .status__contrast_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-teal);
+        } .status__contrast_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-700);
-    } .status__contrast_1keqd.status__teal_1keqd {
-        background: var(--color-light-decorative-teal);
     } .status__contrast_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-indigo);
+    } .status__muted_1keqd.status__green_1keqd {
+            background: var(--color-light-decorative-muted-green);
+            color: var(--color-light-decorative-text-green);
+        } .status__muted_1keqd.status__orange_1keqd {
+            background: var(--color-light-decorative-muted-orange);
+            color: var(--color-light-decorative-text-orange);
+        } .status__muted_1keqd.status__red_1keqd {
+            background: var(--color-light-decorative-muted-red);
+            color: var(--color-light-decorative-text-red);
+        } .status__muted_1keqd.status__blue_1keqd {
+            background: var(--color-light-decorative-muted-blue);
+            color: var(--color-light-decorative-text-blue);
+        } .status__muted_1keqd.status__teal_1keqd {
+            background: var(--color-light-decorative-muted-teal);
+            color: var(--color-light-decorative-text-teal);
+        } .status__muted_1keqd.status__grey_1keqd {
+        background: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-secondary);
+    } .status__muted_1keqd.status__purple_1keqd {
+        background: var(--color-light-decorative-muted-indigo);
+        color: var(--color-light-decorative-text-indigo);
     }

package/system-message/Components.responsive.js CHANGED Viewed

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/cssm/Components.responsive.js CHANGED Viewed

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/esm/Components.responsive.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { isClient } from '../../shared/esm';
+import { getComponentBreakpoint, isClient } from '../../shared/esm';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -13,7 +13,7 @@ import './components/subtitle/Component.js';
 import './components/title/Component.js';
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/modern/Components.responsive.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { isClient } from '../../shared/modern';
+import { getComponentBreakpoint, isClient } from '../../shared/modern';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -11,7 +11,7 @@ import './components/graphic/Component.js';
 import './components/subtitle/Component.js';
 import './components/title/Component.js';
-const SystemMessageResponsiveComponent = ({ breakpoint = 1024, defaultMatchMediaValue, children, ...restProps }) => {
+const SystemMessageResponsiveComponent = ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, children, ...restProps }) => {
     const query = `(min-width: ${breakpoint}px)`;
     const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
     const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);

package/tabs/components/primary-tablist/Component.collapsible.js CHANGED Viewed

@@ -6,6 +6,7 @@ var cn = require('classnames');
 var coreComponentsBadge = require('../../../badge');
 var coreComponentsKeyboardFocusable = require('../../../keyboard-focusable');
 var desktop = require('../../../picker-button/desktop');
+var coreComponentsShared = require('../../../shared');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
@@ -17,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var CollapsiblePrimaryTabList = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? coreComponentsShared.getComponentBreakpoint() : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = React.useRef(null);
     var _f = hooks_useTablistTitles.useTablistTitles({
         titles: titles,