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

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoiceItemLabelCell = InvoiceItemLabelCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const typography_1 = require("@cloud-ru/ds-typography");
+const helpers_1 = require("../../../../helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function InvoiceItemLabelCell({ item }) {
+    const isLabelVisible = 'label' in item && item.label !== undefined;
+    if (!isLabelVisible) {
+        return;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.labelCell, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.label, children: item.labelMaxLines ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: item.label, maxLines: item.labelMaxLines }) : item.label }), item.labelTooltip && (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { tip: item.labelTooltip })] }), item.quantity && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.quantity, children: (0, helpers_1.formatQuantity)(item.quantity) }))] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InvoiceItemLabelCell"), exports);

package/dist/cjs/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/cjs/components/PriceSummary/components/PeriodDropdown/PeriodDropdown.d.ts

@@ -0,0 +1,7 @@
+import { PricePeriod } from '../../../../types';
+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/cjs/components/PriceSummary/components/PeriodDropdown/PeriodDropdown.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeriodDropdown = PeriodDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("@cloud-ru/ds-typography");
+const uikit_product_button_predefined_1 = require("@cloud-ru/ds-uikit-product-button-predefined");
+const constants_1 = require("../../../../constants");
+const hooks_1 = require("../../../../hooks");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PeriodDropdown({ period, onPeriodChanged = () => { }, periodOptions }) {
+    const { t } = locale_1.priceSummaryLocale.useTranslations();
+    const formatPeriod = (0, hooks_1.usePeriodFormat)();
+    const actions = periodOptions
+        .filter(item => item !== period)
+        .map(item => ({
+        id: item,
+        content: { label: formatPeriod(item) },
+        onClick: () => onPeriodChanged(item),
+        'data-test-id': constants_1.PERIOD_OPTION_TEST_IDS[item],
+    }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.period, "data-single": actions.length === 0 ? true : undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, children: t('total') }), actions.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.single, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, children: formatPeriod(period) }) })), actions.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonDropdown, { size: 's', label: formatPeriod(period), items: actions, closeDroplistOnItemClick: true, "data-test-id": constants_1.TEST_IDS.periodDropdown }))] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PeriodDropdown"), exports);

package/dist/cjs/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/cjs/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { AppearanceState, PriceDeltaDetails, TotalSumType } from '../../../../types';
+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/cjs/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TotalValueBlock = TotalValueBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = require("@cloud-ru/ds-link");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const typography_1 = require("@cloud-ru/ds-typography");
+const constants_1 = require("../../../../constants");
+const helpers_1 = require("../../../../helpers");
+const locale_1 = require("../../../../locale");
+const utils_1 = require("../../../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TotalValueBlock({ value, totalSumType = 'equal', hint, hintAppearance = constants_1.APPEARANCE_STATE.Default, showHintTooltip, hintTooltipText, hintLink, showHintLink, valueDelta, }) {
+    const { t } = locale_1.priceSummaryLocale.useTranslations();
+    const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-appearance": hintAppearance, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.headline, size: typography_1.SIZE.s, weight: typography_1.WEIGHT.thin, children: value !== undefined
+                    ? `${totalSumPrefix}${(0, helpers_1.formatCurrency)(Number(value))}`
+                    : t('notAvailable') }), valueDelta && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.valueDelta, children: `${t(`${valueDelta.type}Price`)} ${(0, helpers_1.formatCurrency)(valueDelta.value)}` })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { open: showHintTooltip && hintTooltipText ? undefined : false, tip: hintTooltipText, placement: 'left-start', children: hint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hint, "data-appearance": hintAppearance, children: [(0, utils_1.getAppearanceIcon)(hintAppearance, styles_module_scss_1.default.hintIcon), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, children: hint })] })) }), showHintLink && ((0, jsx_runtime_1.jsx)(link_1.Link, { roleAppearance: link_1.ROLE_APPEARANCE.OnAccent, appearance: 'neutral', href: hintLink?.href, label: hintLink?.label, className: styles_module_scss_1.default.link }))] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TotalValueBlock"), exports);

package/dist/cjs/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/cjs/components/PriceSummary/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PriceSummary"), exports);

package/dist/cjs/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/cjs/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';
+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/cjs/components/PriceSummarySmall/PriceSummarySmall.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceSummarySmall = PriceSummarySmall;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const materials_1 = require("@cloud-ru/ds-materials");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const typography_1 = require("@cloud-ru/ds-typography");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const helpers_1 = require("../../helpers");
+const locale_1 = require("../../locale");
+const ContentBlock_1 = require("../ContentBlock");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PriceSummarySmall({ value = 0, docsLink, hintTooltipText, loading, dataError, onRetry, className, ...rest }) {
+    const { t } = locale_1.priceSummaryLocale.useTranslations();
+    const { appearance, level } = (0, materials_1.backgroundPredefinedFillToAcrylic)(materials_1.BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.priceSummarySmall, className), "data-acrylic-appearance": appearance, "data-acrylic-level": level, ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.acrylic, "aria-hidden": true, "data-acrylic-background": true }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, children: t('total') }), (0, jsx_runtime_1.jsxs)(ContentBlock_1.ContentBlock, { loading: loading, dataError: dataError, onRetry: onRetry, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.value, children: [hintTooltipText ? ((0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { tip: hintTooltipText, children: (0, jsx_runtime_1.jsx)(system_1.NotifierInfoFilledSVG, { size: 16, className: styles_module_scss_1.default.icon }) })) : ((0, jsx_runtime_1.jsx)(system_1.NotifierInfoFilledSVG, { size: 16, className: styles_module_scss_1.default.icon })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.m, children: (0, helpers_1.formatCurrency)(value) })] }), docsLink?.href && ((0, jsx_runtime_1.jsx)(button_1.Button, { as: 'a', view: 'function', size: 'm', label: docsLink.label || t('costLink'), href: docsLink.href, target: '_blank', className: styles_module_scss_1.default.docLink }))] })] })] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PriceSummarySmall"), exports);