@cloud-ru/ds-uikit-product-price-summary 1.0.0

package/dist/esm/components/PriceSummary/components/InvoiceItemLabelCell/InvoiceItemLabelCell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { formatQuantity } from '../../../../helpers/index.js';
+import styles from './styles.module.css';
+export function InvoiceItemLabelCell({ item }) {
+    const isLabelVisible = 'label' in item && item.label !== undefined;
+    if (!isLabelVisible) {
+        return;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.labelCell, children: [_jsx(Typography, { variant: VARIANT.body, size: SIZE.s, className: styles.label, children: item.labelMaxLines ? _jsx(TruncateString, { text: item.label, maxLines: item.labelMaxLines }) : item.label }), item.labelTooltip && _jsx(QuestionTooltip, { tip: item.labelTooltip })] }), item.quantity && (_jsx(Typography, { variant: VARIANT.body, size: SIZE.s, className: styles.quantity, children: formatQuantity(item.quantity) }))] }));
+}

package/dist/esm/components/PriceSummary/components/InvoiceItemLabelCell/index.d.ts

@@ -0,0 +1 @@
+export * from './InvoiceItemLabelCell.js';

package/dist/esm/components/PriceSummary/components/InvoiceItemLabelCell/index.js

@@ -0,0 +1 @@
+export * from './InvoiceItemLabelCell.js';

package/dist/esm/components/PriceSummary/components/InvoiceItemLabelCell/styles.module.css

@@ -0,0 +1,14 @@
+.labelCell{
+  display:flex;
+  gap:var(--sn-primitive-dimension-2, 2px);
+}
+
+.label{
+  flex:0 1 auto;
+  min-width:0;
+}
+
+.quantity{
+  flex:0 0 auto;
+  white-space:nowrap;
+}

package/dist/esm/components/PriceSummary/components/PeriodDropdown/PeriodDropdown.d.ts

@@ -0,0 +1,7 @@
+import { PricePeriod } from '../../../../types.js';
+export type PeriodDropdownProps = {
+    period: PricePeriod;
+    periodOptions: PricePeriod[];
+    onPeriodChanged?(period: PricePeriod): void;
+};
+export declare function PeriodDropdown({ period, onPeriodChanged, periodOptions }: PeriodDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/PeriodDropdown/PeriodDropdown.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined';
+import { PERIOD_OPTION_TEST_IDS, TEST_IDS } from '../../../../constants.js';
+import { usePeriodFormat } from '../../../../hooks/index.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+export function PeriodDropdown({ period, onPeriodChanged = () => { }, periodOptions }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const formatPeriod = usePeriodFormat();
+    const actions = periodOptions
+        .filter(item => item !== period)
+        .map(item => ({
+        id: item,
+        content: { label: formatPeriod(item) },
+        onClick: () => onPeriodChanged(item),
+        'data-test-id': PERIOD_OPTION_TEST_IDS[item],
+    }));
+    return (_jsxs("div", { className: styles.period, "data-single": actions.length === 0 ? true : undefined, children: [_jsx(Typography, { variant: VARIANT.body, size: SIZE.m, children: t('total') }), actions.length === 0 && (_jsx("div", { className: styles.single, children: _jsx(Typography, { variant: VARIANT.body, size: SIZE.m, children: formatPeriod(period) }) })), actions.length > 0 && (_jsx(ButtonDropdown, { size: 's', label: formatPeriod(period), items: actions, closeDroplistOnItemClick: true, "data-test-id": TEST_IDS.periodDropdown }))] }));
+}

package/dist/esm/components/PriceSummary/components/PeriodDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './PeriodDropdown.js';

package/dist/esm/components/PriceSummary/components/PeriodDropdown/index.js

@@ -0,0 +1 @@
+export * from './PeriodDropdown.js';

package/dist/esm/components/PriceSummary/components/PeriodDropdown/styles.module.css

@@ -0,0 +1,15 @@
+.period{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+.period[data-single]{
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+
+.single{
+  display:flex;
+  align-items:center;
+  min-height:var(--sn-primitive-dimension-32, 32px);
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

package/dist/esm/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { AppearanceState, PriceDeltaDetails, TotalSumType } from '../../../../types.js';
+export type TotalValueBlockProps = {
+    value?: number;
+    valueDelta?: PriceDeltaDetails;
+    totalSumType?: TotalSumType;
+    hint?: string;
+    hintAppearance?: AppearanceState;
+    showHintTooltip?: boolean;
+    hintTooltipText?: ReactNode;
+    hintLink?: {
+        href?: string;
+        label: string;
+    };
+    showHintLink?: boolean;
+};
+export declare function TotalValueBlock({ value, totalSumType, hint, hintAppearance, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, }: TotalValueBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, ROLE_APPEARANCE } from '@cloud-ru/ds-link';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT, WEIGHT } from '@cloud-ru/ds-typography';
+import { APPEARANCE_STATE } from '../../../../constants.js';
+import { formatCurrency } from '../../../../helpers/index.js';
+import { priceSummaryLocale } from '../../../../locale/index.js';
+import { getAppearanceIcon } from '../../../../utils/index.js';
+import styles from './styles.module.css';
+export function TotalValueBlock({ value, totalSumType = 'equal', hint, hintAppearance = APPEARANCE_STATE.Default, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
+    return (_jsxs("div", { className: styles.content, "data-appearance": hintAppearance, children: [_jsx(Typography, { variant: VARIANT.headline, size: SIZE.s, weight: WEIGHT.thin, children: value !== undefined
+                    ? `${totalSumPrefix}${formatCurrency(Number(value))}`
+                    : t('notAvailable') }), valueDelta && (_jsx(Typography, { variant: VARIANT.body, size: SIZE.s, className: styles.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${formatCurrency(valueDelta.value)}` })), _jsx(Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: hint && (_jsxs("div", { className: styles.hint, "data-appearance": hintAppearance, children: [getAppearanceIcon(hintAppearance, styles.hintIcon), _jsx(Typography, { variant: VARIANT.body, size: SIZE.s, children: hint })] })) }), showHintLink && (_jsx(Link, { roleAppearance: ROLE_APPEARANCE.OnAccent, appearance: 'neutral', href: hintLink?.href, label: hintLink?.label, className: styles.link }))] }));
+}

package/dist/esm/components/PriceSummary/components/TotalValueBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './TotalValueBlock.js';

package/dist/esm/components/PriceSummary/components/TotalValueBlock/index.js

@@ -0,0 +1 @@
+export * from './TotalValueBlock.js';

package/dist/esm/components/PriceSummary/components/TotalValueBlock/styles.module.css

@@ -0,0 +1,51 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  text-align:start;
+}
+.content[data-appearance=userError]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+.content[data-appearance=warning]{
+  color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
+}
+.content[data-appearance=systemError]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+
+.hint{
+  display:flex;
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.hint[data-appearance=userError]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+.hint[data-appearance=warning]{
+  color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
+}
+.hint[data-appearance=systemError]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+
+.hintIcon{
+  flex-shrink:0;
+  box-sizing:content-box;
+}
+.hintIcon[data-appearance=default]{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.hintIcon[data-appearance=userError]{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.hintIcon[data-appearance=warning]{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.hintIcon[data-appearance=systemError]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+
+.valueDelta{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}

package/dist/esm/components/PriceSummary/index.d.ts

@@ -0,0 +1 @@
+export * from './PriceSummary.js';

package/dist/esm/components/PriceSummary/index.js

@@ -0,0 +1 @@
+export * from './PriceSummary.js';

package/dist/esm/components/PriceSummary/styles.module.css

@@ -0,0 +1,227 @@
+@charset "UTF-8";
+.acrylic{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.priceSummary{
+  position:relative;
+  box-sizing:border-box;
+  width:100%;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  border-radius:var(--sn-block-anatomy-m-borderRadius, var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px)));
+  padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.priceSummary[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=transparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.priceSummary[data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.priceSummary[data-acrylic-appearance=decorTransparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+
+.content{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+}

package/dist/esm/components/PriceSummarySmall/PriceSummarySmall.d.ts

@@ -0,0 +1,18 @@
+import { LinkProps } from '@cloud-ru/ds-link';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+import { ContentBlockProps } from '../ContentBlock/index.js';
+export type PriceSummarySmallProps = WithSupportProps<ContentBlockProps & {
+    /** Итоговая сумма. */
+    value: number | undefined;
+    /** Function-ссылка внизу блока. */
+    docsLink?: {
+        href?: LinkProps['href'];
+        label?: LinkProps['label'];
+    };
+    /** Контент подсказки для иконки рядом с итоговой суммой. */
+    hintTooltipText?: ReactNode;
+    /** Дополнительный класс корневого контейнера. */
+    className?: string;
+}>;
+export declare function PriceSummarySmall({ value, docsLink, hintTooltipText, loading, dataError, onRetry, className, ...rest }: PriceSummarySmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PriceSummarySmall/PriceSummarySmall.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { NotifierInfoFilledSVG } from '@cloud-ru/ds-icons/interface/system';
+import { BACKGROUND_PREDEFINED_FILL, backgroundPredefinedFillToAcrylic } from '@cloud-ru/ds-materials';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { formatCurrency } from '../../helpers/index.js';
+import { priceSummaryLocale } from '../../locale/index.js';
+import { ContentBlock } from '../ContentBlock/index.js';
+import styles from './styles.module.css';
+export function PriceSummarySmall({ value = 0, docsLink, hintTooltipText, loading, dataError, onRetry, className, ...rest }) {
+    const { t } = priceSummaryLocale.useTranslations();
+    const { appearance, level } = backgroundPredefinedFillToAcrylic(BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level);
+    return (_jsxs("div", { className: cn(styles.priceSummarySmall, className), "data-acrylic-appearance": appearance, "data-acrylic-level": level, ...extractSupportProps(rest), children: [_jsx("span", { className: styles.acrylic, "aria-hidden": true, "data-acrylic-background": true }), _jsxs("div", { className: styles.content, children: [_jsx(Typography, { variant: VARIANT.body, size: SIZE.m, children: t('total') }), _jsxs(ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [_jsxs("div", { className: styles.value, children: [hintTooltipText ? (_jsx(QuestionTooltip, { tip: hintTooltipText, children: _jsx(NotifierInfoFilledSVG, { size: 16, className: styles.icon }) })) : (_jsx(NotifierInfoFilledSVG, { size: 16, className: styles.icon })), _jsx(Typography, { variant: VARIANT.title, size: SIZE.m, children: formatCurrency(value) })] }), docsLink?.href && (_jsx(Button, { as: 'a', view: 'function', size: 'm', label: docsLink.label || t('costLink'), href: docsLink.href, target: '_blank', className: styles.docLink }))] })] })] }));
+}

package/dist/esm/components/PriceSummarySmall/index.d.ts

@@ -0,0 +1 @@
+export * from './PriceSummarySmall.js';

package/dist/esm/components/PriceSummarySmall/index.js

@@ -0,0 +1 @@
+export * from './PriceSummarySmall.js';