@alfalab/core-components 47.12.0 → 47.12.1-beta.0

package/spinner/moderncssm/Component.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import cn from 'classnames';
+import { useId } from '@alfalab/hooks';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+const CONFIG = {
+    xs: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    s: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    m: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
+    16: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    24: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    48: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
+};
+const SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-16',
+    s: 'size-24',
+    m: 'size-48',
+    16: 'size-16',
+    24: 'size-24',
+    48: 'size-48',
+};
+const Spinner = ({ size: sizeProp = 24, colors = 'default', visible, id, className, dataTestId, }) => {
+    const uniqId = useId();
+    const { size, padding, lineWidth } = CONFIG[sizeProp];
+    const xStart = padding + lineWidth / 2;
+    const xEnd = size - xStart;
+    const y = size / 2;
+    const r = y - xStart;
+    const topGradientId = `${uniqId}_top`;
+    const bottomGradientId = `${uniqId}_bottom`;
+    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, {
+            [styles.visible]: visible,
+        }), "data-test-id": dataTestId, id: id },
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
+            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
+        React.createElement("g", { strokeWidth: lineWidth },
+            React.createElement("path", { stroke: `url(#${topGradientId})`, d: `M${xStart},${y} A${r},${r} 0 0 1 ${xEnd},${y}` }),
+            React.createElement("path", { stroke: `url(#${bottomGradientId})`, d: `M${xEnd},${y} A${r},${r} 0 0 1 ${xStart},${y}` }),
+            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: `M${xStart},${y} A${r},${r} 0 0 1 ${xStart} ${y}` }))));
+};
+
+export { SIZE_TO_CLASSNAME_MAP, Spinner };

package/spinner/moderncssm/default.module.css

@@ -0,0 +1,9 @@
+/* */
+
+:root {
+    --spinner-default-color: var(--color-light-neutral-translucent-1300);
+}
+
+.component {
+    color: var(--spinner-default-color);
+}

package/spinner/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/spinner/moderncssm/index.js

@@ -0,0 +1,7 @@
+export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './default.module.css';
+import './index.module.css';
+import './inverted.module.css';

package/spinner/moderncssm/index.module.css

@@ -0,0 +1,43 @@
+/* */
+
+:root {
+    --spinner-display-visible: inline-block;
+    --spinner-animation-duration: 0.8s;
+    --spinner-animation-timing-function: linear;
+}
+
+.spinner {
+    display: none;
+    animation: spin_animation var(--spinner-animation-duration) infinite
+        var(--spinner-animation-timing-function);
+}
+
+.visible {
+    display: var(--spinner-display-visible);
+    vertical-align: middle;
+}
+
+.size-16 {
+    width: 16px;
+    height: 16px;
+}
+
+.size-24 {
+    width: 24px;
+    height: 24px;
+}
+
+.size-48 {
+    width: 48px;
+    height: 48px;
+}
+
+@keyframes spin_animation {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

package/spinner/moderncssm/inverted.module.css

@@ -0,0 +1,9 @@
+/* */
+
+:root {
+    --spinner-inverted-color: var(--color-light-neutral-translucent-1300-inverted);
+}
+
+.component {
+    color: var(--spinner-inverted-color);
+}

package/stack/moderncssm/component.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+export { StackProps, Stack };

package/stack/moderncssm/component.js

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { StackingContext, stackingOrder } from '@alfalab/stack-context';
+
+const Stack = ({ children, value = stackingOrder.DEFAULT }) => {
+    const previousValue = useContext(StackingContext);
+    const currentValue = Math.max(value, previousValue);
+    const nextValue = currentValue + 1;
+    return (React.createElement(StackingContext.Provider, { value: nextValue }, children(currentValue)));
+};
+
+export { Stack };

package/stack/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/stack/moderncssm/index.js

@@ -0,0 +1,3 @@
+export { Stack } from './component.js';
+import 'react';
+import '@alfalab/stack-context';

package/status/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"status__component_zfndo","ellipsis":"status__ellipsis_zfndo","soft":"status__soft_zfndo","muted-alt":"status__muted-alt_zfndo","green":"status__green_zfndo","orange":"status__orange_zfndo","red":"status__red_zfndo","blue":"status__blue_zfndo","teal":"status__teal_zfndo","grey":"status__grey_zfndo","purple":"status__purple_zfndo","contrast":"status__contrast_zfndo","muted":"status__muted_zfndo"};
+var styles = {"component":"status__component_1h4l9","ellipsis":"status__ellipsis_1h4l9","soft":"status__soft_1h4l9","muted-alt":"status__muted-alt_1h4l9","green":"status__green_1h4l9","orange":"status__orange_1h4l9","red":"status__red_1h4l9","blue":"status__blue_1h4l9","teal":"status__teal_1h4l9","grey":"status__grey_1h4l9","purple":"status__purple_1h4l9","contrast":"status__contrast_1h4l9","muted":"status__muted_1h4l9"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"status__component_zfndo","ellipsis":"status__ellipsis_zfndo","soft":"status__soft_zfndo","muted-alt":"status__muted-alt_zfndo","green":"status__green_zfndo","orange":"status__orange_zfndo","red":"status__red_zfndo","blue":"status__blue_zfndo","teal":"status__teal_zfndo","grey":"status__grey_zfndo","purple":"status__purple_zfndo","contrast":"status__contrast_zfndo","muted":"status__muted_zfndo"};
+var styles = {"component":"status__component_1h4l9","ellipsis":"status__ellipsis_1h4l9","soft":"status__soft_1h4l9","muted-alt":"status__muted-alt_1h4l9","green":"status__green_1h4l9","orange":"status__orange_1h4l9","red":"status__red_1h4l9","blue":"status__blue_1h4l9","teal":"status__teal_1h4l9","grey":"status__grey_1h4l9","purple":"status__purple_1h4l9","contrast":"status__contrast_1h4l9","muted":"status__muted_1h4l9"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/index.css

@@ -50,7 +50,7 @@
     --color-light-decorative-text-orange: #ea8313;
     --color-light-decorative-text-red: #ec2d20;
     --color-light-decorative-text-teal: #058a8f;
-} .status__component_zfndo {
+} .status__component_1h4l9 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -64,70 +64,70 @@
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.5px
-} .status__component_zfndo .status__ellipsis_zfndo {
+} .status__component_1h4l9 .status__ellipsis_1h4l9 {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .status__component_zfndo:empty {
+    } .status__component_1h4l9:empty {
         padding: 0;
-    } .status__soft_zfndo.status__green_zfndo, .status__muted-alt_zfndo.status__green_zfndo {
+    } .status__soft_1h4l9.status__green_1h4l9, .status__muted-alt_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-alt-green);
             color: var(--color-light-decorative-text-green);
-        } .status__soft_zfndo.status__orange_zfndo, .status__muted-alt_zfndo.status__orange_zfndo {
+        } .status__soft_1h4l9.status__orange_1h4l9, .status__muted-alt_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-alt-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__soft_zfndo.status__red_zfndo, .status__muted-alt_zfndo.status__red_zfndo {
+        } .status__soft_1h4l9.status__red_1h4l9, .status__muted-alt_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-alt-red);
             color: var(--color-light-decorative-text-red);
-        } .status__soft_zfndo.status__blue_zfndo, .status__muted-alt_zfndo.status__blue_zfndo {
+        } .status__soft_1h4l9.status__blue_1h4l9, .status__muted-alt_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-alt-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__soft_zfndo.status__teal_zfndo, .status__muted-alt_zfndo.status__teal_zfndo {
+        } .status__soft_1h4l9.status__teal_1h4l9, .status__muted-alt_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-alt-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__soft_zfndo.status__grey_zfndo, .status__muted-alt_zfndo.status__grey_zfndo {
+        } .status__soft_1h4l9.status__grey_1h4l9, .status__muted-alt_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_zfndo.status__purple_zfndo, .status__muted-alt_zfndo.status__purple_zfndo {
+    } .status__soft_1h4l9.status__purple_1h4l9, .status__muted-alt_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
-    } .status__contrast_zfndo {
+    } .status__contrast_1h4l9 {
     color: var(--color-light-text-primary-inverted)
-} .status__contrast_zfndo.status__green_zfndo {
+} .status__contrast_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-green);
-        } .status__contrast_zfndo.status__orange_zfndo {
+        } .status__contrast_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-orange);
-        } .status__contrast_zfndo.status__red_zfndo {
+        } .status__contrast_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-red);
-        } .status__contrast_zfndo.status__blue_zfndo {
+        } .status__contrast_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-blue);
-        } .status__contrast_zfndo.status__teal_zfndo {
+        } .status__contrast_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-teal);
-        } .status__contrast_zfndo.status__grey_zfndo {
+        } .status__contrast_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-700);
-    } .status__contrast_zfndo.status__purple_zfndo {
+    } .status__contrast_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-indigo);
-    } .status__muted_zfndo.status__green_zfndo {
+    } .status__muted_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-green);
             color: var(--color-light-decorative-text-green);
-        } .status__muted_zfndo.status__orange_zfndo {
+        } .status__muted_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__muted_zfndo.status__red_zfndo {
+        } .status__muted_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-red);
             color: var(--color-light-decorative-text-red);
-        } .status__muted_zfndo.status__blue_zfndo {
+        } .status__muted_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__muted_zfndo.status__teal_zfndo {
+        } .status__muted_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__muted_zfndo.status__grey_zfndo {
+        } .status__muted_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-200);
         color: var(--color-light-text-secondary);
-    } .status__muted_zfndo.status__purple_zfndo {
+    } .status__muted_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-indigo);
         color: var(--color-light-decorative-text-indigo);
     }

package/status/index.css

@@ -50,7 +50,7 @@
     --color-light-decorative-text-orange: #ea8313;
     --color-light-decorative-text-red: #ec2d20;
     --color-light-decorative-text-teal: #058a8f;
-} .status__component_zfndo {
+} .status__component_1h4l9 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -64,70 +64,70 @@
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.5px
-} .status__component_zfndo .status__ellipsis_zfndo {
+} .status__component_1h4l9 .status__ellipsis_1h4l9 {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .status__component_zfndo:empty {
+    } .status__component_1h4l9:empty {
         padding: 0;
-    } .status__soft_zfndo.status__green_zfndo, .status__muted-alt_zfndo.status__green_zfndo {
+    } .status__soft_1h4l9.status__green_1h4l9, .status__muted-alt_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-alt-green);
             color: var(--color-light-decorative-text-green);
-        } .status__soft_zfndo.status__orange_zfndo, .status__muted-alt_zfndo.status__orange_zfndo {
+        } .status__soft_1h4l9.status__orange_1h4l9, .status__muted-alt_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-alt-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__soft_zfndo.status__red_zfndo, .status__muted-alt_zfndo.status__red_zfndo {
+        } .status__soft_1h4l9.status__red_1h4l9, .status__muted-alt_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-alt-red);
             color: var(--color-light-decorative-text-red);
-        } .status__soft_zfndo.status__blue_zfndo, .status__muted-alt_zfndo.status__blue_zfndo {
+        } .status__soft_1h4l9.status__blue_1h4l9, .status__muted-alt_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-alt-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__soft_zfndo.status__teal_zfndo, .status__muted-alt_zfndo.status__teal_zfndo {
+        } .status__soft_1h4l9.status__teal_1h4l9, .status__muted-alt_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-alt-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__soft_zfndo.status__grey_zfndo, .status__muted-alt_zfndo.status__grey_zfndo {
+        } .status__soft_1h4l9.status__grey_1h4l9, .status__muted-alt_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_zfndo.status__purple_zfndo, .status__muted-alt_zfndo.status__purple_zfndo {
+    } .status__soft_1h4l9.status__purple_1h4l9, .status__muted-alt_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
-    } .status__contrast_zfndo {
+    } .status__contrast_1h4l9 {
     color: var(--color-light-text-primary-inverted)
-} .status__contrast_zfndo.status__green_zfndo {
+} .status__contrast_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-green);
-        } .status__contrast_zfndo.status__orange_zfndo {
+        } .status__contrast_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-orange);
-        } .status__contrast_zfndo.status__red_zfndo {
+        } .status__contrast_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-red);
-        } .status__contrast_zfndo.status__blue_zfndo {
+        } .status__contrast_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-blue);
-        } .status__contrast_zfndo.status__teal_zfndo {
+        } .status__contrast_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-teal);
-        } .status__contrast_zfndo.status__grey_zfndo {
+        } .status__contrast_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-700);
-    } .status__contrast_zfndo.status__purple_zfndo {
+    } .status__contrast_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-indigo);
-    } .status__muted_zfndo.status__green_zfndo {
+    } .status__muted_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-green);
             color: var(--color-light-decorative-text-green);
-        } .status__muted_zfndo.status__orange_zfndo {
+        } .status__muted_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__muted_zfndo.status__red_zfndo {
+        } .status__muted_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-red);
             color: var(--color-light-decorative-text-red);
-        } .status__muted_zfndo.status__blue_zfndo {
+        } .status__muted_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__muted_zfndo.status__teal_zfndo {
+        } .status__muted_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__muted_zfndo.status__grey_zfndo {
+        } .status__muted_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-200);
         color: var(--color-light-text-secondary);
-    } .status__muted_zfndo.status__purple_zfndo {
+    } .status__muted_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-indigo);
         color: var(--color-light-decorative-text-indigo);
     }

package/status/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"status__component_zfndo","ellipsis":"status__ellipsis_zfndo","soft":"status__soft_zfndo","muted-alt":"status__muted-alt_zfndo","green":"status__green_zfndo","orange":"status__orange_zfndo","red":"status__red_zfndo","blue":"status__blue_zfndo","teal":"status__teal_zfndo","grey":"status__grey_zfndo","purple":"status__purple_zfndo","contrast":"status__contrast_zfndo","muted":"status__muted_zfndo"};
+const styles = {"component":"status__component_1h4l9","ellipsis":"status__ellipsis_1h4l9","soft":"status__soft_1h4l9","muted-alt":"status__muted-alt_1h4l9","green":"status__green_1h4l9","orange":"status__orange_1h4l9","red":"status__red_1h4l9","blue":"status__blue_1h4l9","teal":"status__teal_1h4l9","grey":"status__grey_1h4l9","purple":"status__purple_1h4l9","contrast":"status__contrast_1h4l9","muted":"status__muted_1h4l9"};
 require('./index.css');
 
 const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/modern/index.css

@@ -50,7 +50,7 @@
     --color-light-decorative-text-orange: #ea8313;
     --color-light-decorative-text-red: #ec2d20;
     --color-light-decorative-text-teal: #058a8f;
-} .status__component_zfndo {
+} .status__component_1h4l9 {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -64,70 +64,70 @@
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.5px
-} .status__component_zfndo .status__ellipsis_zfndo {
+} .status__component_1h4l9 .status__ellipsis_1h4l9 {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .status__component_zfndo:empty {
+    } .status__component_1h4l9:empty {
         padding: 0;
-    } .status__soft_zfndo.status__green_zfndo, .status__muted-alt_zfndo.status__green_zfndo {
+    } .status__soft_1h4l9.status__green_1h4l9, .status__muted-alt_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-alt-green);
             color: var(--color-light-decorative-text-green);
-        } .status__soft_zfndo.status__orange_zfndo, .status__muted-alt_zfndo.status__orange_zfndo {
+        } .status__soft_1h4l9.status__orange_1h4l9, .status__muted-alt_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-alt-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__soft_zfndo.status__red_zfndo, .status__muted-alt_zfndo.status__red_zfndo {
+        } .status__soft_1h4l9.status__red_1h4l9, .status__muted-alt_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-alt-red);
             color: var(--color-light-decorative-text-red);
-        } .status__soft_zfndo.status__blue_zfndo, .status__muted-alt_zfndo.status__blue_zfndo {
+        } .status__soft_1h4l9.status__blue_1h4l9, .status__muted-alt_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-alt-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__soft_zfndo.status__teal_zfndo, .status__muted-alt_zfndo.status__teal_zfndo {
+        } .status__soft_1h4l9.status__teal_1h4l9, .status__muted-alt_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-alt-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__soft_zfndo.status__grey_zfndo, .status__muted-alt_zfndo.status__grey_zfndo {
+        } .status__soft_1h4l9.status__grey_1h4l9, .status__muted-alt_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__soft_zfndo.status__purple_zfndo, .status__muted-alt_zfndo.status__purple_zfndo {
+    } .status__soft_1h4l9.status__purple_1h4l9, .status__muted-alt_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
-    } .status__contrast_zfndo {
+    } .status__contrast_1h4l9 {
     color: var(--color-light-text-primary-inverted)
-} .status__contrast_zfndo.status__green_zfndo {
+} .status__contrast_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-green);
-        } .status__contrast_zfndo.status__orange_zfndo {
+        } .status__contrast_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-orange);
-        } .status__contrast_zfndo.status__red_zfndo {
+        } .status__contrast_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-red);
-        } .status__contrast_zfndo.status__blue_zfndo {
+        } .status__contrast_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-blue);
-        } .status__contrast_zfndo.status__teal_zfndo {
+        } .status__contrast_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-teal);
-        } .status__contrast_zfndo.status__grey_zfndo {
+        } .status__contrast_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-700);
-    } .status__contrast_zfndo.status__purple_zfndo {
+    } .status__contrast_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-indigo);
-    } .status__muted_zfndo.status__green_zfndo {
+    } .status__muted_1h4l9.status__green_1h4l9 {
             background: var(--color-light-decorative-muted-green);
             color: var(--color-light-decorative-text-green);
-        } .status__muted_zfndo.status__orange_zfndo {
+        } .status__muted_1h4l9.status__orange_1h4l9 {
             background: var(--color-light-decorative-muted-orange);
             color: var(--color-light-decorative-text-orange);
-        } .status__muted_zfndo.status__red_zfndo {
+        } .status__muted_1h4l9.status__red_1h4l9 {
             background: var(--color-light-decorative-muted-red);
             color: var(--color-light-decorative-text-red);
-        } .status__muted_zfndo.status__blue_zfndo {
+        } .status__muted_1h4l9.status__blue_1h4l9 {
             background: var(--color-light-decorative-muted-blue);
             color: var(--color-light-decorative-text-blue);
-        } .status__muted_zfndo.status__teal_zfndo {
+        } .status__muted_1h4l9.status__teal_1h4l9 {
             background: var(--color-light-decorative-muted-teal);
             color: var(--color-light-decorative-text-teal);
-        } .status__muted_zfndo.status__grey_zfndo {
+        } .status__muted_1h4l9.status__grey_1h4l9 {
         background: var(--color-light-neutral-translucent-200);
         color: var(--color-light-text-secondary);
-    } .status__muted_zfndo.status__purple_zfndo {
+    } .status__muted_1h4l9.status__purple_1h4l9 {
         background: var(--color-light-decorative-muted-indigo);
         color: var(--color-light-decorative-text-indigo);
     }

package/status/moderncssm/Component.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+type StatusProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     * @description soft deprecated, используйте вместо него muted-alt
+     */
+    view?: 'contrast' | 'soft' | 'muted' | 'muted-alt';
+    /**
+     * Цветовое оформление иконки
+     */
+    color?: (typeof colors)[number];
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Status: FC<StatusProps>;
+export { colors, StatusProps, Status };

package/status/moderncssm/Component.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
+const logWarning = () => {
+    if (process.env.NODE_ENV !== 'development') {
+        return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(
+    // eslint-disable-next-line prefer-template
+    '@alfalab/core-components/status: view=soft будет удален в следующих мажорных версиях. ' +
+        'Используйте view=muted-alt. Чтобы изменить view=soft на view=muted-alt, можно воспользоваться codemod: ' +
+        'npx @alfalab/core-components-codemod --transformers=status-soft src/**/*.tsx');
+};
+const Status = ({ className, view = 'muted-alt', color = 'green', children, dataTestId, }) => {
+    if (view === 'soft') {
+        logWarning();
+    }
+    return (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/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/status/moderncssm/index.js

@@ -0,0 +1,4 @@
+export { Status, colors } from './Component.js';
+import 'react';
+import 'classnames';
+import './index.module.css';