@alfalab/core-components 47.13.0-beta.0 → 47.13.0-beta.1

package/side-panel/modern/Component.responsive.js

@@ -7,7 +7,7 @@ import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
-import './layout.module-549d23fa.js';
+import './layout.module-c793f704.js';
 import '../../navigation-bar-private/modern';
 import './consts.js';
 import './Context.js';

package/side-panel/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-549d23fa.js';
+import { l as layoutStyles } from '../../layout.module-c793f704.js';
 
 const styles = {"component":"side-panel__component_8dofa"};
 require('./index.css');

package/side-panel/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-549d23fa.js';
+import '../../layout.module-c793f704.js';

package/side-panel/modern/components/footer/Component.desktop.js

@@ -6,7 +6,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-549d23fa.js';
+import '../../layout.module-c793f704.js';
 
 const styles = {"sticky":"side-panel__sticky_nuap6","size-500":"side-panel__size-500_nuap6"};
 require('./desktop.css');

package/side-panel/modern/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-549d23fa.js';
+import { l as layoutStyles } from '../../layout.module-c793f704.js';
 import '../../../../base-modal/modern';
 
 const styles = {"footer":"side-panel__footer_f38kg","sticky":"side-panel__sticky_f38kg","highlighted":"side-panel__highlighted_f38kg"};

package/side-panel/modern/components/footer/Component.mobile.js

@@ -5,7 +5,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-549d23fa.js';
+import '../../layout.module-c793f704.js';
 
 const styles = {"footer":"side-panel__footer_pwwqy","sticky":"side-panel__sticky_pwwqy"};
 require('./mobile.css');

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-549d23fa.js';
+import '../layout.module-c793f704.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/modern';
 

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-549d23fa.js';
+import '../layout.module-c793f704.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-549d23fa.js';
+import './layout.module-c793f704.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-549d23fa.js';
+import '../layout.module-c793f704.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-549d23fa.js';
+import '../layout.module-c793f704.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/status/Component.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+import { colors, sizes } from "./consts/index";
 type StatusProps = {
     /**
      * Дополнительный класс
@@ -22,6 +22,21 @@ type StatusProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Размер компонента
+     * @default 20
+     */
+    size?: (typeof sizes)[number];
+    /**
+     * Форма компонента
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Текст компонента в верхнем регистре
+     * @default true
+     */
+    uppercase?: boolean;
 };
 declare const Status: FC<StatusProps>;
-export { colors, StatusProps, Status };
+export { StatusProps, Status };

package/status/Component.js

@@ -8,10 +8,9 @@ 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_13yo6","ellipsis":"status__ellipsis_13yo6","soft":"status__soft_13yo6","muted-alt":"status__muted-alt_13yo6","green":"status__green_13yo6","orange":"status__orange_13yo6","red":"status__red_13yo6","blue":"status__blue_13yo6","teal":"status__teal_13yo6","grey":"status__grey_13yo6","purple":"status__purple_13yo6","contrast":"status__contrast_13yo6","muted":"status__muted_13yo6"};
+var styles = {"component":"status__component_13yo6","ellipsis":"status__ellipsis_13yo6","size-20":"status__size-20_13yo6","size-24":"status__size-24_13yo6","size-32":"status__size-32_13yo6","size-40":"status__size-40_13yo6","rounded":"status__rounded_13yo6","uppercase":"status__uppercase_13yo6","soft":"status__soft_13yo6","muted-alt":"status__muted-alt_13yo6","green":"status__green_13yo6","orange":"status__orange_13yo6","red":"status__red_13yo6","blue":"status__blue_13yo6","teal":"status__teal_13yo6","grey":"status__grey_13yo6","purple":"status__purple_13yo6","contrast":"status__contrast_13yo6","muted":"status__muted_13yo6"};
 require('./index.css');
 
-var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
 var logWarning = function () {
     if (process.env.NODE_ENV !== 'development') {
         return;
@@ -24,13 +23,15 @@ var logWarning = function () {
         'npx @alfalab/core-components-codemod --transformers=status-soft src/**/*.tsx');
 };
 var Status = function (_a) {
-    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;
+    var _b;
+    var className = _a.className, _c = _a.view, view = _c === void 0 ? 'muted-alt' : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, children = _a.children, dataTestId = _a.dataTestId, _e = _a.size, size = _e === void 0 ? 20 : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.uppercase, uppercase = _g === void 0 ? true : _g;
     if (view === 'soft') {
         logWarning();
     }
-    return (React__default.default.createElement("span", { className: cn__default.default(styles.component, styles[color], styles[view], className), "data-test-id": dataTestId },
+    return (React__default.default.createElement("span", { className: cn__default.default(styles.component, styles[color], styles[view], styles["size-".concat(size)], styles[shape], className, (_b = {},
+            _b[styles.uppercase] = uppercase,
+            _b)), "data-test-id": dataTestId },
         React__default.default.createElement("span", { className: styles.ellipsis }, children)));
 };
 
 exports.Status = Status;
-exports.colors = colors;

package/status/consts/index.d.ts

@@ -0,0 +1,3 @@
+declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+declare const sizes: readonly [20, 24, 32, 40];
+export { colors, sizes };

package/status/consts/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
+var sizes = [20, 24, 32, 40];
+
+exports.colors = colors;
+exports.sizes = sizes;

package/status/cssm/Component.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+import { colors, sizes } from "./consts/index";
 type StatusProps = {
     /**
      * Дополнительный класс
@@ -22,6 +22,21 @@ type StatusProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Размер компонента
+     * @default 20
+     */
+    size?: (typeof sizes)[number];
+    /**
+     * Форма компонента
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Текст компонента в верхнем регистре
+     * @default true
+     */
+    uppercase?: boolean;
 };
 declare const Status: FC<StatusProps>;
-export { colors, StatusProps, Status };
+export { StatusProps, Status };

package/status/cssm/Component.js

@@ -10,7 +10,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
 var logWarning = function () {
     if (process.env.NODE_ENV !== 'development') {
         return;
@@ -23,13 +22,15 @@ var logWarning = function () {
         'npx @alfalab/core-components-codemod --transformers=status-soft src/**/*.tsx');
 };
 var Status = function (_a) {
-    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;
+    var _b;
+    var className = _a.className, _c = _a.view, view = _c === void 0 ? 'muted-alt' : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, children = _a.children, dataTestId = _a.dataTestId, _e = _a.size, size = _e === void 0 ? 20 : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.uppercase, uppercase = _g === void 0 ? true : _g;
     if (view === 'soft') {
         logWarning();
     }
-    return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, styles__default.default[color], styles__default.default[view], className), "data-test-id": dataTestId },
+    return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, styles__default.default[color], styles__default.default[view], styles__default.default["size-".concat(size)], styles__default.default[shape], className, (_b = {},
+            _b[styles__default.default.uppercase] = uppercase,
+            _b)), "data-test-id": dataTestId },
         React__default.default.createElement("span", { className: styles__default.default.ellipsis }, children)));
 };
 
 exports.Status = Status;
-exports.colors = colors;

package/status/cssm/consts/index.d.ts

@@ -0,0 +1,3 @@
+declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+declare const sizes: readonly [20, 24, 32, 40];
+export { colors, sizes };

package/status/cssm/consts/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
+var sizes = [20, 24, 32, 40];
+
+exports.colors = colors;
+exports.sizes = sizes;

package/status/cssm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export { colors } from "./consts/index";

package/status/cssm/index.js

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
+var consts_index = require('./consts/index.js');
 
 
 
 exports.Status = Component.Status;
-exports.colors = Component.colors;
+exports.colors = consts_index.colors;

package/status/cssm/index.module.css

@@ -14,14 +14,20 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */
-    --border-radius-s: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-pill: 99px;
 
     /* новые значения, используйте их */
-} :root { /* deprecated */ /* deprecated */
-    --gap-xs: 8px; /* 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 */
+    --border-radius-6: 6px;
+    --border-radius-10: 10px;
+    --border-radius-12: 12px;
+} :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 */
 
     /* новые значения, используйте их */
+    --gap-8: 8px;
+    --gap-12: 12px;
+    --gap-16: 16px;
+    --gap-20: 20px;
 } :root {
 } :root {
 } :root {
@@ -50,18 +56,16 @@
     --color-light-decorative-text-red: #ec2d20;
     --color-light-decorative-text-teal: #058a8f;
 } .component {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 700;
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 20px;
-    padding: 0 var(--gap-xs);
-    border-radius: var(--border-radius-s);
+    height: auto;
+    height: initial;
+    padding: 0;
+    border-radius: 0;
     text-align: center;
-    text-transform: uppercase;
+    text-transform: none;
+    text-transform: initial;
     letter-spacing: 0.5px
 } .component .ellipsis {
         -webkit-line-clamp: 1;
@@ -71,7 +75,50 @@
         word-break: break-all;
     } .component:empty {
         padding: 0;
-    } .soft,
+    } .component.size-20 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+        height: 20px;
+        padding: 0 var(--gap-8);
+        border-radius: var(--border-radius-6);
+    } .component.size-24 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+        height: 24px;
+        padding: 0 var(--gap-12);
+        border-radius: var(--border-radius-6);
+    } .component.size-32 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        height: 32px;
+        padding: 0 var(--gap-16);
+        border-radius: var(--border-radius-10);
+    } .component.size-40 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        height: 40px;
+        padding: 0 var(--gap-20);
+        border-radius: var(--border-radius-12);
+    } .component.rounded {
+        border-radius: var(--border-radius-pill);
+    } .component.uppercase.size-20,
+        .component.uppercase.size-24 {
+            font-size: 11px;
+            line-height: 16px;
+            font-weight: 700;
+            text-transform: uppercase;
+        } .component.uppercase.size-32,
+        .component.uppercase.size-40 {
+            font-size: 12px;
+            line-height: 16px;
+            font-weight: 700;
+            letter-spacing: 1.25px;
+            text-transform: uppercase;
+        } .soft,
 .muted-alt {
         &.green {
             background: var(--color-light-decorative-muted-alt-green);

package/status/esm/Component.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+import { colors, sizes } from "./consts/index";
 type StatusProps = {
     /**
      * Дополнительный класс
@@ -22,6 +22,21 @@ type StatusProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Размер компонента
+     * @default 20
+     */
+    size?: (typeof sizes)[number];
+    /**
+     * Форма компонента
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Текст компонента в верхнем регистре
+     * @default true
+     */
+    uppercase?: boolean;
 };
 declare const Status: FC<StatusProps>;
-export { colors, StatusProps, Status };
+export { StatusProps, Status };

package/status/esm/Component.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"status__component_13yo6","ellipsis":"status__ellipsis_13yo6","soft":"status__soft_13yo6","muted-alt":"status__muted-alt_13yo6","green":"status__green_13yo6","orange":"status__orange_13yo6","red":"status__red_13yo6","blue":"status__blue_13yo6","teal":"status__teal_13yo6","grey":"status__grey_13yo6","purple":"status__purple_13yo6","contrast":"status__contrast_13yo6","muted":"status__muted_13yo6"};
+var styles = {"component":"status__component_13yo6","ellipsis":"status__ellipsis_13yo6","size-20":"status__size-20_13yo6","size-24":"status__size-24_13yo6","size-32":"status__size-32_13yo6","size-40":"status__size-40_13yo6","rounded":"status__rounded_13yo6","uppercase":"status__uppercase_13yo6","soft":"status__soft_13yo6","muted-alt":"status__muted-alt_13yo6","green":"status__green_13yo6","orange":"status__orange_13yo6","red":"status__red_13yo6","blue":"status__blue_13yo6","teal":"status__teal_13yo6","grey":"status__grey_13yo6","purple":"status__purple_13yo6","contrast":"status__contrast_13yo6","muted":"status__muted_13yo6"};
 require('./index.css');
 
-var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
 var logWarning = function () {
     if (process.env.NODE_ENV !== 'development') {
         return;
@@ -17,12 +16,15 @@ var logWarning = function () {
         'npx @alfalab/core-components-codemod --transformers=status-soft src/**/*.tsx');
 };
 var Status = function (_a) {
-    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;
+    var _b;
+    var className = _a.className, _c = _a.view, view = _c === void 0 ? 'muted-alt' : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, children = _a.children, dataTestId = _a.dataTestId, _e = _a.size, size = _e === void 0 ? 20 : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.uppercase, uppercase = _g === void 0 ? true : _g;
     if (view === 'soft') {
         logWarning();
     }
-    return (React.createElement("span", { className: cn(styles.component, styles[color], styles[view], className), "data-test-id": dataTestId },
+    return (React.createElement("span", { className: cn(styles.component, styles[color], styles[view], styles["size-".concat(size)], styles[shape], className, (_b = {},
+            _b[styles.uppercase] = uppercase,
+            _b)), "data-test-id": dataTestId },
         React.createElement("span", { className: styles.ellipsis }, children)));
 };
 
-export { Status, colors };
+export { Status };

package/status/esm/consts/index.d.ts

@@ -0,0 +1,3 @@
+declare const colors: readonly ["green", "orange", "red", "blue", "grey", "teal", "purple"];
+declare const sizes: readonly [20, 24, 32, 40];
+export { colors, sizes };

package/status/esm/consts/index.js

@@ -0,0 +1,4 @@
+var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];
+var sizes = [20, 24, 32, 40];
+
+export { colors, sizes };

package/status/esm/index.css

@@ -15,14 +15,20 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */
-    --border-radius-s: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-pill: 99px;
 
     /* новые значения, используйте их */
-} :root { /* deprecated */ /* deprecated */
-    --gap-xs: 8px; /* 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 */
+    --border-radius-6: 6px;
+    --border-radius-10: 10px;
+    --border-radius-12: 12px;
+} :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 */
 
     /* новые значения, используйте их */
+    --gap-8: 8px;
+    --gap-12: 12px;
+    --gap-16: 16px;
+    --gap-20: 20px;
 } :root {
 } :root {
 } :root {
@@ -51,18 +57,14 @@
     --color-light-decorative-text-red: #ec2d20;
     --color-light-decorative-text-teal: #058a8f;
 } .status__component_13yo6 {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 700;
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 20px;
-    padding: 0 var(--gap-xs);
-    border-radius: var(--border-radius-s);
+    height: initial;
+    padding: 0;
+    border-radius: 0;
     text-align: center;
-    text-transform: uppercase;
+    text-transform: initial;
     letter-spacing: 0.5px
 } .status__component_13yo6 .status__ellipsis_13yo6 {
         -webkit-line-clamp: 1;
@@ -72,7 +74,50 @@
         word-break: break-all;
     } .status__component_13yo6:empty {
         padding: 0;
-    } .status__soft_13yo6.status__green_13yo6, .status__muted-alt_13yo6.status__green_13yo6 {
+    } .status__component_13yo6.status__size-20_13yo6 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+        height: 20px;
+        padding: 0 var(--gap-8);
+        border-radius: var(--border-radius-6);
+    } .status__component_13yo6.status__size-24_13yo6 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+        height: 24px;
+        padding: 0 var(--gap-12);
+        border-radius: var(--border-radius-6);
+    } .status__component_13yo6.status__size-32_13yo6 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        height: 32px;
+        padding: 0 var(--gap-16);
+        border-radius: var(--border-radius-10);
+    } .status__component_13yo6.status__size-40_13yo6 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+        height: 40px;
+        padding: 0 var(--gap-20);
+        border-radius: var(--border-radius-12);
+    } .status__component_13yo6.status__rounded_13yo6 {
+        border-radius: var(--border-radius-pill);
+    } .status__component_13yo6.status__uppercase_13yo6.status__size-20_13yo6,
+        .status__component_13yo6.status__uppercase_13yo6.status__size-24_13yo6 {
+            font-size: 11px;
+            line-height: 16px;
+            font-weight: 700;
+            text-transform: uppercase;
+        } .status__component_13yo6.status__uppercase_13yo6.status__size-32_13yo6,
+        .status__component_13yo6.status__uppercase_13yo6.status__size-40_13yo6 {
+            font-size: 12px;
+            line-height: 16px;
+            font-weight: 700;
+            letter-spacing: 1.25px;
+            text-transform: uppercase;
+        } .status__soft_13yo6.status__green_13yo6, .status__muted-alt_13yo6.status__green_13yo6 {
             background: var(--color-light-decorative-muted-alt-green);
             color: var(--color-light-decorative-text-green);
         } .status__soft_13yo6.status__orange_13yo6, .status__muted-alt_13yo6.status__orange_13yo6 {

package/status/esm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export { colors } from "./consts/index";

package/status/esm/index.js

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