ydb-embedded-ui 17.2.0 → 18.0.0

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { IconData } from '@gravity-ui/uikit';
+import type { IconWithColor } from '../../utils/disks/iconCalculators';
 import './DiskStateProgressBar.scss';
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
@@ -12,8 +14,11 @@ interface DiskStateProgressBarProps {
     className?: string;
     isDonor?: boolean;
     withIcon?: boolean;
+    icon?: IconData | IconWithColor[] | string;
+    modeModifier?: string;
     highlighted?: boolean;
     noDataPlaceholder?: React.ReactNode;
+    isLegendInactive?: boolean;
 }
-export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, faded, inactive, empty, content, striped, className, isDonor, withIcon, highlighted, noDataPlaceholder, }: DiskStateProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, faded, inactive, empty, content, striped, className, isDonor, withIcon, icon: providedIcon, modeModifier, highlighted, noDataPlaceholder, isLegendInactive, }: DiskStateProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.js

@@ -3,12 +3,12 @@ import { Flex, Icon } from '@gravity-ui/uikit';
 import { SETTING_KEYS } from '../../store/reducers/settings/constants';
 import { cn } from '../../utils/cn';
 import { DONOR_COLOR, NOT_AVAILABLE_SEVERITY } from '../../utils/disks/constants';
-import { getSeverityColor, getVDiskStatusIcon } from '../../utils/disks/helpers';
+import { getDisplaySeverityColor, getVDiskStatusIcon } from '../../utils/disks/helpers';
 import { useSetting } from '../../utils/hooks';
 import { isNumeric } from '../../utils/utils';
 import './DiskStateProgressBar.scss';
 const b = cn('storage-disk-progress-bar');
-export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, faded, inactive, empty, content, striped, className, isDonor, withIcon, highlighted, noDataPlaceholder, }) {
+export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, faded, inactive, empty, content, striped, className, isDonor, withIcon, icon: providedIcon, modeModifier, highlighted, noDataPlaceholder, isLegendInactive, }) {
     const [inverted] = useSetting(SETTING_KEYS.INVERTED_DISKS);
     const mods = {
         inverted,
@@ -18,12 +18,18 @@ export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, comp
         inactive,
         striped,
         highlighted,
+        'legend-inactive': isLegendInactive,
     };
+    // Add mode modifier if present
+    if (modeModifier) {
+        mods[modeModifier] = true;
+        mods['expert-mode'] = true;
+    }
     if (isDonor) {
         mods[DONOR_COLOR.toLocaleLowerCase()] = true;
     }
     else {
-        const color = getSeverityColor(severity);
+        const color = getDisplaySeverityColor(severity);
         if (color) {
             mods[color.toLocaleLowerCase()] = true;
         }
@@ -59,10 +65,28 @@ export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, comp
         return null;
     };
     let iconElement = null;
-    if (withIcon) {
-        const icon = getVDiskStatusIcon(severity, isDonor);
+    const hideIcon = isLegendInactive && !isDonor;
+    if (withIcon && !hideIcon) {
+        // Use provided icon if available, otherwise calculate
+        const icon = providedIcon !== null && providedIcon !== void 0 ? providedIcon : getVDiskStatusIcon(severity, isDonor);
         if (icon) {
-            iconElement = _jsx(Icon, { className: b('icon'), data: icon, size: 12 });
+            // Check if icon is a string (text label for space mode)
+            if (typeof icon === 'string') {
+                iconElement = _jsx("div", { className: b('text-label'), children: icon });
+            }
+            else if (Array.isArray(icon)) {
+                // Multiple icons with individual colors (e.g., for compaction mode: Fresh + Level)
+                // Icons overlap: 10px + 10px - 3px = 17px total width
+                iconElement = (_jsx("div", { className: b('icon-group'), children: icon.map((item, index) => {
+                        // Check if item has color property (IconWithColor)
+                        const iconData = 'icon' in item ? item.icon : item;
+                        const iconColor = 'color' in item ? item.color : undefined;
+                        return (_jsx(Icon, { className: b('icon', { overlapped: index > 0 }), data: iconData, size: 10, style: iconColor ? { color: iconColor } : undefined }, index));
+                    }) }));
+            }
+            else {
+                iconElement = _jsx(Icon, { className: b('icon'), data: icon, size: 12 });
+            }
         }
     }
     const hasIcon = Boolean(iconElement);

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiskStateProgressBar.js","sourceRoot":"","sources":["../../../src/components/DiskStateProgressBar/DiskStateProgressBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DiskStateProgressBar.js","sourceRoot":"","sources":["../../../src/components/DiskStateProgressBar/DiskStateProgressBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -33,6 +33,189 @@
 
     @include mixins.entity-state-colors($block);
 
+    // SolidRed severity (6): solid red background for critical errors in State mode
+    &_solidred {
+        --entity-state-font-color: var(--g-color-text-light-primary);
+        --entity-state-border-color: var(--g-color-base-danger-heavy);
+        --entity-state-background-color: var(--g-color-base-danger-heavy);
+        --entity-state-fill-color: var(--g-color-base-danger-heavy);
+        --entity-state-icon-color: var(--g-color-text-brand-contrast);
+        --entity-state-stripe-color: var(--g-color-text-dark-hint);
+
+        &#{$block}_highlighted {
+            --entity-state-background-color: var(--g-color-base-danger-heavy-hover);
+            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
+        }
+    }
+
+    &_expert-mode {
+        --entity-state-compact-background-color: var(--entity-state-background-color);
+
+        &#{$block}_grey {
+            --entity-state-background-color: var(--g-color-base-neutral-light);
+            --entity-state-border-color: var(--g-color-line-generic);
+            --entity-state-icon-color: rgba(162, 162, 162, 1);
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-neutral-light-hover);
+            }
+        }
+    }
+
+    &_legend-inactive {
+        border: none;
+    }
+
+    // State mode: specific visual variants
+    &_mode-state {
+        // OK state
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-base-positive-medium);
+        }
+
+        // Initial state
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-base-warning-medium);
+            --entity-state-icon-color: var(--g-color-text-warning-heavy);
+        }
+
+        // PDisk Error
+        &#{$block}_red {
+            --entity-state-background-color: var(--g-color-base-danger-medium);
+            --entity-state-border-color: var(--g-color-base-danger-heavy);
+        }
+    }
+
+    &_mode-space {
+        &:not(#{$block}_legend-inactive):not(#{$block}_darkgrey) {
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+            --ydb-progress-bar-font-color: var(--g-color-text-positive-heavy);
+        }
+
+        &#{$block}_spacecyan {
+            --entity-state-background-color: var(--ydb-space-cyan-bg);
+            --entity-state-border-color: var(--ydb-space-cyan-text);
+            --ydb-progress-bar-font-color: var(--ydb-space-cyan-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-cyan-bg-hover);
+            }
+        }
+
+        &#{$block}_spacelightyellow {
+            --entity-state-background-color: var(--ydb-space-light-yellow-bg);
+            --entity-state-border-color: var(
+                --ydb-space-light-yellow-border,
+                var(--ydb-space-light-yellow-text)
+            );
+            --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe);
+            --ydb-progress-bar-font-color: var(--ydb-space-light-yellow-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-light-yellow-bg-hover);
+                --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe-hover);
+            }
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-text-warning-heavy);
+            --ydb-progress-bar-font-color: var(--g-color-text-warning-heavy);
+        }
+
+        &#{$block}_spacelightorange {
+            --entity-state-background-color: var(--ydb-space-light-orange-bg);
+            --entity-state-border-color: var(--ydb-space-light-orange-text);
+            --ydb-progress-bar-font-color: var(--ydb-space-light-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-light-orange-bg-hover);
+            }
+        }
+
+        &#{$block}_spacepreorange {
+            --entity-state-background-color: var(--ydb-space-pre-orange-bg);
+            --entity-state-border-color: var(--ydb-space-pre-orange-text);
+            --ydb-progress-bar-font-color: var(--ydb-space-pre-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-pre-orange-bg-hover);
+            }
+        }
+
+        &#{$block}_spaceorange {
+            --entity-state-background-color: var(--ydb-space-orange-bg);
+            --entity-state-border-color: var(--ydb-space-orange-text);
+            --ydb-progress-bar-font-color: var(--ydb-space-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-orange-bg-hover);
+            }
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-base-danger-heavy);
+            --ydb-progress-bar-font-color: var(--g-color-base-danger-heavy);
+        }
+
+        &#{$block}_spaceblack {
+            --entity-state-background-color: var(--ydb-space-black-bg);
+            --entity-state-border-color: var(--ydb-space-black-border);
+            --ydb-progress-bar-font-color: var(--ydb-space-black-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-black-bg-hover);
+                --entity-state-border-color: var(--ydb-space-black-border-hover);
+            }
+        }
+    }
+
+    &_mode-frontqueues {
+        &:not(#{$block}_solidred):not(#{$block}_darkgrey) {
+            --entity-state-stripe-color2: var(--g-color-base-background);
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-line-warning);
+            --entity-state-icon-color: var(--g-color-text-warning-heavy);
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-line-danger);
+            --entity-state-icon-color: var(--g-color-text-danger);
+        }
+    }
+
+    &_mode-compaction {
+        --entity-state-background-color: transparent;
+
+        &:not(#{$block}_darkgrey) {
+            --entity-state-stripe-color: var(--g-color-base-neutral-light);
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+
+            &#{$block}_highlighted {
+                --entity-state-stripe-color: var(--entity-state-background-color);
+            }
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+            --entity-state-icon-color: var(--g-color-text-positive);
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-line-warning);
+            --entity-state-icon-color: var(--g-color-text-warning);
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-line-danger);
+            --entity-state-icon-color: var(--g-color-text-danger);
+        }
+    }
+
     &_compact {
         min-width: 8px;
         height: var(--progress-bar-compact-height);
@@ -63,14 +246,25 @@
         overflow: hidden;
         // Inset shadow = border overlay without shrinking the striped fill
         border: none;
+        background-color: var(--entity-state-stripe-background-color, transparent);
         background-image: repeating-linear-gradient(
             135deg,
-            transparent 0,
-            transparent var(--stripe-width),
-            var(--entity-state-fill-color) var(--stripe-width),
-            var(--entity-state-fill-color) var(--stripe-step)
+            var(--entity-state-stripe-color, var(--entity-state-background-color)) 0,
+            var(--entity-state-stripe-color, var(--entity-state-background-color))
+                var(--stripe-width),
+            var(--entity-state-stripe-color2, transparent) var(--stripe-width),
+            var(--entity-state-stripe-color2, transparent) var(--stripe-step)
         );
-        box-shadow: 0 0 0 $border-width var(--entity-state-shadow-color) inset;
+        box-shadow: 0 0 0 $border-width
+            var(--entity-state-stripe-border-color, var(--entity-state-shadow-color)) inset;
+
+        &#{$block}_solidred {
+            --entity-state-stripe-color: var(--g-color-text-dark-hint);
+            --entity-state-stripe-color2: transparent;
+            --entity-state-icon-color: var(--g-color-text-brand-contrast);
+            background-color: var(--entity-state-background-color);
+            box-shadow: none;
+        }
     }
 
     &__fill-bar {
@@ -123,6 +317,26 @@
         }
     }
 
+    &__icon-group {
+        position: relative;
+        z-index: 2;
+
+        display: inline-flex;
+        align-items: center;
+
+        margin-left: calc(var(--g-spacing-1) - $border-width);
+
+        // Icons inside group don't have individual margin-left
+        #{$block}__icon {
+            margin-left: 0;
+
+            &_overlapped {
+                // Second icon overlaps the first by 3px
+                margin-left: -3px;
+            }
+        }
+    }
+
     &__icon {
         position: relative;
         z-index: 2;
@@ -131,4 +345,15 @@
 
         color: var(--entity-state-icon-color, var(--entity-state-border-color));
     }
+
+    &__text-label {
+        position: relative;
+        z-index: 2;
+
+        margin-left: var(--g-spacing-1);
+
+        font-size: var(--g-text-caption-2-font-size);
+
+        color: var(--ydb-progress-bar-font-color, var(--entity-state-border-color));
+    }
 }

package/dist/components/FullNodeViewer/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "version" | "database" | "links" | "dc" | "uptime" | "rack" | "no-data" | "la-interval-1m" | "la-interval-5m" | "la-interval-15m" | "developer-ui" | "title.common-info" | "title.endpoints" | "title.roles" | "title.pools" | "title.load-average", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "version" | "database" | "links" | "dc" | "uptime" | "no-data" | "rack" | "la-interval-1m" | "la-interval-5m" | "la-interval-15m" | "developer-ui" | "title.common-info" | "title.endpoints" | "title.roles" | "title.pools" | "title.load-average", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.d.ts

@@ -1,6 +1,7 @@
-import type { LinkProps } from '@gravity-ui/uikit';
-interface LinkToSchemaObjectProps extends Omit<LinkProps, 'href'> {
+import React from 'react';
+import { InternalLink } from '../InternalLink';
+interface LinkToSchemaObjectProps extends Omit<React.ComponentProps<typeof InternalLink>, 'to'> {
     path: string;
 }
-export declare function LinkToSchemaObject({ path, ...props }: LinkToSchemaObjectProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkToSchemaObject({ path, onClick, target, ...props }: LinkToSchemaObjectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.js

@@ -1,14 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from '@gravity-ui/uikit';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { createExternalUILink, parseQuery } from '../../routes';
-export function LinkToSchemaObject({ path, ...props }) {
+import { useDiagnosticsPageLinkGetter } from '../../containers/Tenant/Diagnostics/DiagnosticsPages';
+import { useOptionalDispatchTreeKey } from '../../containers/Tenant/ObjectSummary/UpdateTreeContext';
+import { useNavigationV2Enabled } from '../../containers/Tenant/utils/useNavigationV2Enabled';
+import { parseQuery } from '../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../store/reducers/tenant/constants';
+import { InternalLink } from '../InternalLink';
+import { getSchemaObjectLinkDiagnosticsTab } from './utils';
+function shouldRefreshSchemaTree(event, target) {
+    return (!event.defaultPrevented &&
+        event.button === 0 &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        (!target || target === '_self'));
+}
+export function LinkToSchemaObject({ path, onClick, target, ...props }) {
+    var _a;
     const location = useLocation();
+    const isV2NavigationEnabled = useNavigationV2Enabled();
+    const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
+    const refreshSchemaTree = useOptionalDispatchTreeKey();
     const queryParams = parseQuery(location);
-    const pathToSchemaObject = createExternalUILink({
-        ...queryParams,
-        schema: path,
-    });
-    return _jsx(Link, { view: "normal", ...props, href: pathToSchemaObject });
+    const diagnosticsTab = (_a = getSchemaObjectLinkDiagnosticsTab(queryParams, isV2NavigationEnabled)) !== null && _a !== void 0 ? _a : TENANT_DIAGNOSTICS_TABS_IDS.overview;
+    const pathToSchemaObject = getDiagnosticsPageLink(diagnosticsTab, { schema: path });
+    const handleClick = React.useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (refreshSchemaTree && shouldRefreshSchemaTree(event, target)) {
+            refreshSchemaTree(path);
+        }
+    }, [onClick, path, refreshSchemaTree, target]);
+    return (_jsx(InternalLink, { view: "normal", ...props, target: target, onClick: handleClick, to: pathToSchemaObject }));
 }
 //# sourceMappingURL=LinkToSchemaObject.js.map

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkToSchemaObject.js","sourceRoot":"","sources":["../../../src/components/LinkToSchemaObject/LinkToSchemaObject.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAC,oBAAoB,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAM9D,MAAM,UAAU,kBAAkB,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAA0B;IACxE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;QAC5C,GAAG,WAAW;QACd,MAAM,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,KAAK,KAAK,EAAE,IAAI,EAAE,kBAAkB,GAAI,CAAC;AACvE,CAAC"}
+{"version":3,"file":"LinkToSchemaObject.js","sourceRoot":"","sources":["../../../src/components/LinkToSchemaObject/LinkToSchemaObject.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAC,4BAA4B,EAAC,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAC,0BAA0B,EAAC,MAAM,yDAAyD,CAAC;AACnG,OAAO,EAAC,sBAAsB,EAAC,MAAM,sDAAsD,CAAC;AAC5F,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,2BAA2B,EAAC,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAC,iCAAiC,EAAC,MAAM,SAAS,CAAC;AAM1D,SAAS,uBAAuB,CAC5B,KAA0C,EAC1C,MAAyC;IAEzC,OAAO,CACH,CAAC,KAAK,CAAC,gBAAgB;QACvB,KAAK,CAAC,MAAM,KAAK,CAAC;QAClB,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,QAAQ;QACf,CAAC,CAAC,MAAM,IAAI,MAAM,KAAK,OAAO,CAAC,CAClC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAA0B;;IACzF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,qBAAqB,GAAG,sBAAsB,EAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,4BAA4B,EAAE,CAAC;IAC9D,MAAM,iBAAiB,GAAG,0BAA0B,EAAE,CAAC;IACvD,MAAM,WAAW,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,cAAc,GAChB,MAAA,iCAAiC,CAAC,WAAW,EAAE,qBAAqB,CAAC,mCACrE,2BAA2B,CAAC,QAAQ,CAAC;IACzC,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,cAAc,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,CAAC;IAElF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAA0C,EAAE,EAAE;QAC3C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QAEjB,IAAI,iBAAiB,IAAI,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;YAC9D,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,EACD,CAAC,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAC7C,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,IAAI,EAAC,QAAQ,KACT,KAAK,EACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE,kBAAkB,GACxB,CACL,CAAC;AACN,CAAC"}

package/dist/components/LinkToSchemaObject/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TenantDiagnosticsTab } from '../../store/reducers/tenant/types';
+type SchemaObjectLinkQueryParams = Record<string, unknown>;
+export declare function getSchemaObjectLinkDiagnosticsTab(queryParams: SchemaObjectLinkQueryParams, isV2NavigationEnabled: boolean): TenantDiagnosticsTab | undefined;
+export {};

package/dist/components/LinkToSchemaObject/utils.js

@@ -0,0 +1,19 @@
+import { TenantTabsGroups } from '../../containers/Tenant/TenantPages';
+import { getTenantPageForDiagnosticsTab } from '../../containers/Tenant/utils/diagnosticsNavigation';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGES_IDS } from '../../store/reducers/tenant/constants';
+function isTenantDiagnosticsTab(value) {
+    return (typeof value === 'string' &&
+        Object.values(TENANT_DIAGNOSTICS_TABS_IDS).includes(value));
+}
+export function getSchemaObjectLinkDiagnosticsTab(queryParams, isV2NavigationEnabled) {
+    const diagnosticsTab = queryParams[TenantTabsGroups.diagnosticsTab];
+    if (!isTenantDiagnosticsTab(diagnosticsTab)) {
+        return isV2NavigationEnabled ? TENANT_DIAGNOSTICS_TABS_IDS.overview : undefined;
+    }
+    if (getTenantPageForDiagnosticsTab(diagnosticsTab, isV2NavigationEnabled) ===
+        TENANT_PAGES_IDS.database) {
+        return TENANT_DIAGNOSTICS_TABS_IDS.overview;
+    }
+    return diagnosticsTab;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/LinkToSchemaObject/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/LinkToSchemaObject/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAC,8BAA8B,EAAC,MAAM,qDAAqD,CAAC;AACnG,OAAO,EAAC,2BAA2B,EAAE,gBAAgB,EAAC,MAAM,uCAAuC,CAAC;AAKpG,SAAS,sBAAsB,CAAC,KAAc;IAC1C,OAAO,CACH,OAAO,KAAK,KAAK,QAAQ;QACzB,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,QAAQ,CAAC,KAA6B,CAAC,CACrF,CAAC;AACN,CAAC;AAED,MAAM,UAAU,iCAAiC,CAC7C,WAAwC,EACxC,qBAA8B;IAE9B,MAAM,cAAc,GAAG,WAAW,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAEpE,IAAI,CAAC,sBAAsB,CAAC,cAAc,CAAC,EAAE,CAAC;QAC1C,OAAO,qBAAqB,CAAC,CAAC,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACpF,CAAC;IAED,IACI,8BAA8B,CAAC,cAAc,EAAE,qBAAqB,CAAC;QACrE,gBAAgB,CAAC,QAAQ,EAC3B,CAAC;QACC,OAAO,2BAA2B,CAAC,QAAQ,CAAC;IAChD,CAAC;IAED,OAAO,cAAc,CAAC;AAC1B,CAAC"}

package/dist/components/LinkWithIcon/LinkWithIcon.js

@@ -8,7 +8,7 @@ import './LinkWithIcon.scss';
 const b = cn('ydb-link-with-icon');
 export const LinkWithIcon = ({ title, url, external = true, className, icon, description, hideEndIcon, }) => {
     const linkContent = (_jsxs(React.Fragment, { children: [icon ? _jsx(Icon, { data: icon, size: 16 }) : null, icon ? '\u00a0' : null, title, hideEndIcon ? null : (_jsxs(React.Fragment, { children: ['\u00a0', _jsx(ArrowUpRightFromSquare, {})] }))] }));
-    const link = external ? (_jsx(Link, { href: url, target: "_blank", className: b(null, className), children: linkContent })) : (_jsx(InternalLink, { to: url, className: b(null, className), children: linkContent }));
+    const link = external ? (_jsx(Link, { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className), children: linkContent })) : (_jsx(InternalLink, { to: url, className: b(null, className), children: linkContent }));
     if (description) {
         return (_jsx(ActionTooltip, { title: description, placement: ['top', 'bottom'], children: link }));
     }

package/dist/components/LinkWithIcon/LinkWithIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkWithIcon.js","sourceRoot":"","sources":["../../../src/components/LinkWithIcon/LinkWithIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAC,aAAa,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAE7C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC;AAYnC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,KAAK,EACL,GAAG,EACH,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,IAAI,EACJ,WAAW,EACX,WAAW,GACa,EAAE,EAAE;IAC5B,MAAM,WAAW,GAAG,CAChB,MAAC,KAAK,CAAC,QAAQ,eACV,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EAC5C,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACtB,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClB,MAAC,KAAK,CAAC,QAAQ,eACV,QAAQ,EACT,KAAC,sBAAsB,KAAG,IACb,CACpB,IACY,CACpB,CAAC;IAEF,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YACzD,WAAW,GACT,CACV,CAAC,CAAC,CAAC,CACA,KAAC,YAAY,IAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC/C,WAAW,GACD,CAClB,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QACd,OAAO,CACH,KAAC,aAAa,IAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAC1D,IAAI,GACO,CACnB,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"LinkWithIcon.js","sourceRoot":"","sources":["../../../src/components/LinkWithIcon/LinkWithIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAC,aAAa,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAE7C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC;AAYnC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,KAAK,EACL,GAAG,EACH,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,IAAI,EACJ,WAAW,EACX,WAAW,GACa,EAAE,EAAE;IAC5B,MAAM,WAAW,GAAG,CAChB,MAAC,KAAK,CAAC,QAAQ,eACV,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EAC5C,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACtB,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClB,MAAC,KAAK,CAAC,QAAQ,eACV,QAAQ,EACT,KAAC,sBAAsB,KAAG,IACb,CACpB,IACY,CACpB,CAAC;IAEF,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YACnF,WAAW,GACT,CACV,CAAC,CAAC,CAAC,CACA,KAAC,YAAY,IAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC/C,WAAW,GACD,CAClB,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QACd,OAAO,CACH,KAAC,aAAa,IAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,YAC1D,IAAI,GACO,CACnB,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/PDiskInfo/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskInfoKeyset: (key: "space" | "path" | "type" | "links" | "state" | "yes" | "usage" | "developer-ui" | "guid" | "serial-number" | "shared-with-os" | "drive-status" | "device" | "realtime" | "value_no-data" | "slots" | "log-size" | "system-size", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const pDiskInfoKeyset: (key: "space" | "path" | "type" | "links" | "state" | "yes" | "usage" | "value_no-data" | "developer-ui" | "guid" | "serial-number" | "shared-with-os" | "drive-status" | "device" | "realtime" | "slots" | "log-size" | "system-size", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/components/ProgressWrapper/progressUtils.js

@@ -20,7 +20,7 @@ export function getProgressStyle(width) {
     };
 }
 export function formatProgressText(valueText, capacityText, numericCapacity) {
-    if (numericCapacity <= 0) {
+    if (!Number.isFinite(numericCapacity) || numericCapacity <= 0) {
         return String(valueText);
     }
     return i18n('context_capacity-usage', { value: valueText, capacity: capacityText });

package/dist/components/ProgressWrapper/progressUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressUtils.js","sourceRoot":"","sources":["../../../src/components/ProgressWrapper/progressUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAE,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAE7D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAqB,EAAW,EAAE,CAC3D,SAAS,CAAC,GAAG,CAAC,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEhD,MAAM,UAAU,sBAAsB,CAAC,KAAa,EAAE,QAAgB;IAClE,MAAM,aAAa,GACf,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IACpF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IAC1D,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAuB;IACpD,MAAM,WAAW,GAAG,KAAK,KAAK,MAAM,CAAC;IACrC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,sBAAsB,CAAC,CAAC;IAEtF,OAAO;QACH,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,IAAI;QACnD,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;KACnC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,kBAAkB,CAC9B,SAAsC,EACtC,YAAyC,EACzC,eAAuB;IAEvB,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACvB,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;IACD,OAAO,IAAI,CAAC,wBAAwB,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAC,CAAC,CAAC;AACtF,CAAC;AAED,MAAM,UAAU,mBAAmB,CAC/B,KAAkC,EAClC,QAAqC,EACrC,YAAyC;IAEzC,IAAI,YAAY,EAAE,CAAC;QACf,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7D,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAA+D,CAAC;IAChG,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC"}
+{"version":3,"file":"progressUtils.js","sourceRoot":"","sources":["../../../src/components/ProgressWrapper/progressUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAE,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAE7D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAqB,EAAW,EAAE,CAC3D,SAAS,CAAC,GAAG,CAAC,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEhD,MAAM,UAAU,sBAAsB,CAAC,KAAa,EAAE,QAAgB;IAClE,MAAM,aAAa,GACf,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IACpF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IAC1D,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAuB;IACpD,MAAM,WAAW,GAAG,KAAK,KAAK,MAAM,CAAC;IACrC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,sBAAsB,CAAC,CAAC;IAEtF,OAAO;QACH,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,IAAI;QACnD,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;KACnC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,kBAAkB,CAC9B,SAAsC,EACtC,YAAyC,EACzC,eAAuB;IAEvB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QAC5D,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;IACD,OAAO,IAAI,CAAC,wBAAwB,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAC,CAAC,CAAC;AACtF,CAAC;AAED,MAAM,UAAU,mBAAmB,CAC/B,KAAkC,EAClC,QAAqC,EACrC,YAAyC;IAEzC,IAAI,YAAY,EAAE,CAAC;QACf,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7D,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAA+D,CAAC;IAChG,CAAC;IACD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC"}

package/dist/components/SegmentedProgress/SegmentedProgress.d.ts

@@ -1,13 +1,17 @@
 import './SegmentedProgress.scss';
 type DisplayNoLimit = 'empty' | 'filled';
+type SegmentedProgressTheme = 'neutral' | 'success' | 'warning' | 'danger';
 export interface SegmentedProgressProps {
     value: number;
     total: number;
     className?: string;
+    dataQa?: string;
     labelStart?: string;
     labelEnd?: string;
     ariaLabel?: string;
     displayNoLimit?: DisplayNoLimit;
+    hideLabels?: boolean;
+    theme?: SegmentedProgressTheme;
 }
-export declare function SegmentedProgress({ value, total, className, labelStart, labelEnd, ariaLabel, displayNoLimit, }: SegmentedProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedProgress({ value, total, className, dataQa, labelStart, labelEnd, ariaLabel, displayNoLimit, hideLabels, theme, }: SegmentedProgressProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SegmentedProgress/SegmentedProgress.js

@@ -4,10 +4,10 @@ import { Flex, Text } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import './SegmentedProgress.scss';
 const b = cn('ydb-segmented-progress');
-export function SegmentedProgress({ value, total, className, labelStart, labelEnd, ariaLabel, displayNoLimit = 'empty', }) {
+export function SegmentedProgress({ value, total, className, dataQa, labelStart, labelEnd, ariaLabel, displayNoLimit = 'empty', hideLabels, theme, }) {
     const percentUsed = total > 0 ? (value / total) * 100 : 0;
     const normalizedUsed = React.useMemo(() => {
-        if (percentUsed < 0) {
+        if (!Number.isFinite(percentUsed) || percentUsed < 0) {
             return 0;
         }
         if (percentUsed > 100) {
@@ -27,6 +27,6 @@ export function SegmentedProgress({ value, total, className, labelStart, labelEn
         }
         return normalizedUsed;
     }, [total, normalizedUsed, displayNoLimit]);
-    return (_jsxs(Flex, { direction: "column", gap: 1, children: [_jsxs(Flex, { gap: 1, alignItems: "center", wrap: "nowrap", className: b(null, className), role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": normalizedUsed, children: [fillWidth > 0 && (_jsx("div", { className: b('section', { used: true }), style: { width: `${fillWidth}%` } })), 100 - fillWidth > 0 && _jsx("div", { className: b('section'), style: { flexGrow: 1 } })] }), _jsxs(Flex, { width: "100%", children: [labelStart && _jsx(Text, { color: "secondary", children: labelStart }), _jsx(Text, { color: "secondary", className: b('label'), children: labelEnd !== null && labelEnd !== void 0 ? labelEnd : `${normalizedUsed}%` })] })] }));
+    return (_jsxs(Flex, { direction: "column", gap: 1, children: [_jsxs("div", { className: b({ theme }, className), "data-qa": dataQa, role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": normalizedUsed, children: [fillWidth > 0 && (_jsx("div", { className: b('section', { used: true }), style: { width: `${fillWidth}%` } })), 100 - fillWidth > 0 && _jsx("div", { className: b('section'), style: { flexGrow: 1 } })] }), !hideLabels && (_jsxs(Flex, { width: "100%", children: [labelStart && _jsx(Text, { color: "secondary", children: labelStart }), _jsx(Text, { color: "secondary", className: b('label'), children: labelEnd !== null && labelEnd !== void 0 ? labelEnd : `${normalizedUsed}%` })] }))] }));
 }
 //# sourceMappingURL=SegmentedProgress.js.map

package/dist/components/SegmentedProgress/SegmentedProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedProgress.js","sourceRoot":"","sources":["../../../src/components/SegmentedProgress/SegmentedProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,OAAO,0BAA0B,CAAC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAcvC,MAAM,UAAU,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,GAAG,OAAO,GACH;IACrB,MAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YAClB,OAAO,CAAC,CAAC;QACb,CAAC;QACD,IAAI,WAAW,GAAG,GAAG,EAAE,CAAC;YACpB,OAAO,GAAG,CAAC;QACf,CAAC;QACD,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,IAAI,cAAc,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,GAAG,CAAC;YACf,CAAC;YACD,OAAO,CAAC,CAAC;QACb,CAAC;QACD,OAAO,cAAc,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,aAC3B,MAAC,IAAI,IACD,GAAG,EAAE,CAAC,EACN,UAAU,EAAC,QAAQ,EACnB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,IAAI,EAAC,aAAa,gBACN,SAAS,mBACN,CAAC,mBACD,GAAG,mBACH,cAAc,aAE5B,SAAS,GAAG,CAAC,IAAI,CACd,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,SAAS,GAAG,EAAC,GAAI,CAClF,EACA,GAAG,GAAG,SAAS,GAAG,CAAC,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,CAAC,EAAC,GAAI,IAC3E,EACP,MAAC,IAAI,IAAC,KAAK,EAAC,MAAM,aACb,UAAU,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,UAAU,GAAQ,EAC1D,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACxC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,GAAG,cAAc,GAAG,GAC9B,IACJ,IACJ,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"SegmentedProgress.js","sourceRoot":"","sources":["../../../src/components/SegmentedProgress/SegmentedProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,OAAO,0BAA0B,CAAC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAkBvC,MAAM,UAAU,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,SAAS,EACT,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,GAAG,OAAO,EACxB,UAAU,EACV,KAAK,GACgB;IACrB,MAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YACnD,OAAO,CAAC,CAAC;QACb,CAAC;QACD,IAAI,WAAW,GAAG,GAAG,EAAE,CAAC;YACpB,OAAO,GAAG,CAAC;QACf,CAAC;QACD,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,IAAI,cAAc,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,GAAG,CAAC;YACf,CAAC;YACD,OAAO,CAAC,CAAC;QACb,CAAC;QACD,OAAO,cAAc,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,aAC3B,eACI,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,aACvB,MAAM,EACf,IAAI,EAAC,aAAa,gBACN,SAAS,mBACN,CAAC,mBACD,GAAG,mBACH,cAAc,aAE5B,SAAS,GAAG,CAAC,IAAI,CACd,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,SAAS,GAAG,EAAC,GAAI,CAClF,EACA,GAAG,GAAG,SAAS,GAAG,CAAC,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,CAAC,EAAC,GAAI,IAC5E,EACL,CAAC,UAAU,IAAI,CACZ,MAAC,IAAI,IAAC,KAAK,EAAC,MAAM,aACb,UAAU,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,UAAU,GAAQ,EAC1D,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACxC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,GAAG,cAAc,GAAG,GAC9B,IACJ,CACV,IACE,CACV,CAAC;AACN,CAAC"}

package/dist/components/SegmentedProgress/SegmentedProgress.scss

@@ -1,17 +1,50 @@
 .ydb-segmented-progress {
+    --ydb-segmented-progress-height: 10px;
+    --ydb-segmented-progress-section-min-width: 10px;
+    --ydb-segmented-progress-empty-color: var(--g-color-sfx-shadow);
+    --ydb-segmented-progress-empty-opacity: 1;
+    --ydb-segmented-progress-used-color: var(--g-color-base-info-heavy);
+
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--g-spacing-1);
+
     width: 100%;
-    height: 10px;
+    height: var(--ydb-segmented-progress-height);
+
+    &_theme_neutral {
+        --ydb-segmented-progress-used-color: var(--g-color-line-generic);
+    }
+
+    &_theme_success {
+        --ydb-segmented-progress-used-color: var(--g-color-text-positive);
+    }
+
+    &_theme_warning {
+        --ydb-segmented-progress-used-color: var(--g-color-line-warning);
+    }
+
+    &_theme_danger {
+        --ydb-segmented-progress-used-color: var(--g-color-text-danger);
+    }
 
     &__section {
-        min-width: 10px;
+        min-width: var(--ydb-segmented-progress-section-min-width);
         height: 100%;
 
         border-radius: var(--g-border-radius-xs);
-        background-color: var(--g-color-sfx-shadow);
+        background-color: var(--ydb-segmented-progress-empty-color);
     }
+
+    &__section:not(&__section_used) {
+        opacity: var(--ydb-segmented-progress-empty-opacity);
+    }
+
     &__section_used {
-        background-color: var(--g-color-base-info-heavy);
+        background-color: var(--ydb-segmented-progress-used-color);
     }
+
     &__label {
         margin-left: auto;
     }