@gravity-ui/page-constructor 1.0.0

package/build/cjs/sub-blocks/NewsCard/schema.d.ts

@@ -0,0 +1,22 @@
+export declare const NewsCard: {
+    'news-card': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                type: string;
+            };
+            url: {
+                type: string;
+            };
+            date: {
+                type: string;
+            };
+            isoDate: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

package/build/cjs/sub-blocks/NewsCard/schema.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsCard = void 0;
+const common_1 = require("../../schema/validators/common");
+exports.NewsCard = {
+    'news-card': {
+        additionalProperties: false,
+        required: ['title', 'url', 'date'],
+        properties: Object.assign(Object.assign({}, common_1.BaseProps), { title: {
+                type: 'string',
+            }, url: {
+                type: 'string',
+            }, date: {
+                type: 'string',
+            }, isoDate: {
+                type: 'string',
+            } }),
+    },
+};

package/build/cjs/sub-blocks/Partner/Partner.css

@@ -0,0 +1,8 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-partner-block__logo {
+  margin-bottom: 12px;
+  height: 32px;
+  object-fit: contain;
+  display: block;
+}

package/build/cjs/sub-blocks/Partner/Partner.d.ts

@@ -0,0 +1,3 @@
+import { PartnerProps } from '../../models';
+declare const Partner: ({ text, logo, url, border }: PartnerProps) => JSX.Element;
+export default Partner;

package/build/cjs/sub-blocks/Partner/Partner.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../utils");
+const components_1 = require("../../components");
+const b = (0, utils_1.block)('partner-block');
+const Partner = ({ text, logo, url, border }) => {
+    const logoData = typeof logo === 'string' ? { src: logo } : logo;
+    return (react_1.default.createElement(components_1.CardBase, { url: url, target: "_blank", className: b(), border: border },
+        react_1.default.createElement(components_1.CardBase.Content, null,
+            react_1.default.createElement(components_1.Image, { className: b('logo'), src: logoData.src, alt: logoData.alt }),
+            react_1.default.createElement(components_1.HTML, null, text))));
+};
+exports.default = Partner;

package/build/cjs/sub-blocks/Partner/schema.d.ts

@@ -0,0 +1,29 @@
+export declare const PartnerBlock: {
+    partner: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            text: {
+                type: string;
+            };
+            logo: {
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                })[];
+            };
+            url: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

package/build/cjs/sub-blocks/Partner/schema.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PartnerBlock = void 0;
+const common_1 = require("../../schema/validators/common");
+exports.PartnerBlock = {
+    partner: {
+        additionalProperties: false,
+        required: ['text', 'logo', 'url'],
+        properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
+                type: 'string',
+            }, logo: common_1.ImageProps, url: {
+                type: 'string',
+            } }),
+    },
+};

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.css

@@ -0,0 +1,35 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-combined-price-detailed-block__row {
+  /* stylelint-disable declaration-no-important */
+  margin: 0 !important;
+}
+.pc-combined-price-detailed-block__row .col {
+  padding: 0;
+  margin: 12px;
+}
+.pc-combined-price-detailed-block__row > * {
+  display: flex;
+  width: 100%;
+}
+.pc-combined-price-detailed-block__row:not(:last-child) {
+  border-bottom: 1px solid var(--yc-color-line-generic);
+  margin-bottom: 12px !important;
+  padding-bottom: 12px;
+}
+@media (min-width: 1081px) {
+  .pc-combined-price-detailed-block__description > * {
+    padding-top: 12px;
+  }
+  .pc-combined-price-detailed-block__description_delimiter > * {
+    border-top: 1px solid var(--yc-color-line-generic);
+  }
+  .pc-combined-price-detailed-block__empty-column {
+    border-top: 0;
+  }
+}
+@media (max-width: 1080px) {
+  .pc-combined-price-detailed-block__description > * {
+    margin-top: 0 !important;
+  }
+}

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CardBorder, PriceDescriptionProps, PriceDetailsListProps, PriceDetailsSettingsProps, PriceItemProps } from '../../../models';
+interface CombinedPriceDetailedProps {
+    items: PriceItemProps[];
+    numberGroupItems: number;
+    useMixedView?: boolean;
+    getDescriptionComponent: (priceDescription: PriceDescriptionProps) => JSX.Element;
+    getDetailsComponent: (priceDetails?: PriceDetailsSettingsProps[] | PriceDetailsListProps[]) => JSX.Element;
+    border?: CardBorder;
+}
+declare const CombinedPriceDetailed: (props: CombinedPriceDetailedProps) => JSX.Element;
+export default CombinedPriceDetailed;

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../utils");
+const components_1 = require("../../../components");
+const grid_1 = require("../../../grid");
+const constants_1 = require("../../../constants");
+const b = (0, utils_1.block)('combined-price-detailed-block');
+const CombinedPricesGroupSize = {
+    [grid_1.GridColumnSize.Sm]: 1,
+    [grid_1.GridColumnSize.Md]: 2,
+    [grid_1.GridColumnSize.Lg]: 3,
+};
+const CombinedPriceDetailed = (props) => {
+    const { items, numberGroupItems, border, useMixedView, getDescriptionComponent, getDetailsComponent, } = props;
+    const [groupItemsSize, setGroupItemsSize] = (0, react_1.useState)(numberGroupItems);
+    const updateGroupItemsSize = (0, react_1.useCallback)((windowWidth) => {
+        if (windowWidth >= constants_1.BREAKPOINTS.lg) {
+            setGroupItemsSize(numberGroupItems);
+        }
+        else if (constants_1.BREAKPOINTS.lg > windowWidth && windowWidth >= constants_1.BREAKPOINTS.md) {
+            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Lg]);
+        }
+        else if (constants_1.BREAKPOINTS.md > windowWidth && windowWidth >= constants_1.BREAKPOINTS.sm) {
+            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Md]);
+        }
+        else {
+            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Sm]);
+        }
+    }, [numberGroupItems]);
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            updateGroupItemsSize(window.innerWidth);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [updateGroupItemsSize]);
+    const getPrice = (groupPrices) => {
+        const descriptionComponents = Array(groupItemsSize);
+        const detailsComponents = Array(groupItemsSize);
+        for (let id = 0; id < groupItemsSize; id++) {
+            const price = groupPrices[id];
+            descriptionComponents[id] = (react_1.default.createElement(grid_1.Col, { key: `card_${id}` }, price && getDescriptionComponent(price)));
+            detailsComponents[id] = (react_1.default.createElement(grid_1.Col, { key: `details_${id}`, className: price ? '' : b('empty-column') }, price && getDetailsComponent(price.items)));
+        }
+        return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement("div", null, descriptionComponents),
+            react_1.default.createElement("div", { className: b('description', { delimiter: useMixedView }) }, detailsComponents)));
+    };
+    const chunkedItems = lodash_1.default.chunk(items, groupItemsSize);
+    return (react_1.default.createElement(components_1.CardBase, { className: b(), border: border },
+        react_1.default.createElement(components_1.CardBase.Content, null,
+            react_1.default.createElement(grid_1.Grid, null, chunkedItems.map((chunk, id) => {
+                return (react_1.default.createElement(grid_1.Row, { key: id, className: b('row') }, getPrice(chunk)));
+            })))));
+};
+exports.default = CombinedPriceDetailed;

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -0,0 +1,62 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-price-description {
+  margin-bottom: 12px;
+}
+.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l, .pc-price-description__label_size_l {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+}
+.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m, .pc-price-description__label_size_m {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s, .pc-price-description__label_size_s {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+.pc-price-description__main-title {
+  font-weight: 500;
+}
+.pc-price-description__main-title_color_cornflower {
+  color: var(--yc-my-color-brand-normal);
+}
+.pc-price-description__main-title_color_black {
+  color: var(--yc-color-text-primary);
+}
+.pc-price-description__title {
+  display: flex;
+  padding: 16px 0 12px 0;
+  align-items: flex-end;
+}
+.pc-price-description__description {
+  font-weight: 400;
+}
+.pc-price-description__detailed-title {
+  margin-left: 4px;
+}
+.pc-price-description__label {
+  padding: 4px 12px;
+  border-radius: 4px;
+  width: fit-content;
+}
+.pc-price-description__label_color_blue {
+  background: var(--yc-color-promo-highlight-sky);
+}
+.pc-price-description__label_color_green {
+  background: var(--yc-color-promo-highlight-mint);
+}
+.pc-price-description__label_color_yellow {
+  background: var(--yc-color-promo-highlight-gold);
+}
+.pc-price-description__label_color_purple {
+  background: var(--yc-color-promo-highlight-neon);
+}
+.pc-price-description__label_color_red {
+  background: var(--yc-color-promo-highlight-tomato);
+}
+@media (max-width: 577px) {
+  .pc-price-description {
+    min-width: 160px;
+  }
+}

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.d.ts

@@ -0,0 +1,10 @@
+import { PriceDescriptionColor, PriceDescriptionProps, PriceLabelColor, TextSize } from '../../../models';
+interface PriceDescriptionExtendProps extends PriceDescriptionProps {
+    titleSize?: TextSize;
+    descriptionSize?: TextSize;
+    colorTitle?: PriceDescriptionColor;
+    labelsDefaultText?: Record<PriceLabelColor, string>;
+    className?: string;
+}
+declare const PriceDescription: (props: PriceDescriptionExtendProps) => JSX.Element;
+export default PriceDescription;

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../utils");
+const stylesContext_1 = require("../../../context/stylesContext");
+const components_1 = require("../../../components");
+const b = (0, utils_1.block)('price-description');
+const PriceDescription = (props) => {
+    const { title, detailedTitle = '', description, titleSize = 'l', descriptionSize = 'm', colorTitle = 'cornflower', label, labelsDefaultText, className, } = props;
+    const descriptionRef = react_1.default.useRef(null);
+    const { pricesDetailedDescriptionHeight, setStyles } = (0, react_1.useContext)(stylesContext_1.StylesContext);
+    const setDescriptionHeight = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!descriptionRef || !descriptionRef.current) {
+            return;
+        }
+        const descriptionChildren = (_a = descriptionRef.current) === null || _a === void 0 ? void 0 : _a.children;
+        if (!descriptionChildren) {
+            return;
+        }
+        const childrenHeight = [...descriptionChildren].reduce((result, element) => result + element.clientHeight, 0);
+        if (pricesDetailedDescriptionHeight === undefined ||
+            Number(pricesDetailedDescriptionHeight) < childrenHeight) {
+            setStyles({ pricesDetailedDescriptionHeight: childrenHeight.toString() });
+        }
+        else if (childrenHeight < Number(pricesDetailedDescriptionHeight)) {
+            descriptionRef.current.style.height = `${pricesDetailedDescriptionHeight}px`;
+        }
+    }, [pricesDetailedDescriptionHeight, setStyles]);
+    (0, react_1.useEffect)(() => {
+        setDescriptionHeight();
+        window.addEventListener('resize', setDescriptionHeight);
+        return () => window.removeEventListener('resize', setDescriptionHeight);
+    }, [setDescriptionHeight]);
+    const labelElement = (0, react_1.useMemo)(() => {
+        if (!label) {
+            return null;
+        }
+        const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
+        return (react_1.default.createElement("div", { className: b('label', { color: label.color, size: label.size || descriptionSize }) }, labelTitle));
+    }, [descriptionSize, label, labelsDefaultText]);
+    const titleElement = (0, react_1.useMemo)(() => {
+        return (react_1.default.createElement("div", { className: b('title', { size: titleSize }) },
+            react_1.default.createElement("div", { className: b('main-title', { color: colorTitle }) }, title),
+            react_1.default.createElement("div", { className: b('detailed-title', { size: descriptionSize }) }, detailedTitle)));
+    }, [colorTitle, descriptionSize, detailedTitle, title, titleSize]);
+    return (react_1.default.createElement("div", { className: b(null, className), ref: descriptionRef },
+        labelElement,
+        titleElement,
+        react_1.default.createElement("div", { className: b('description', { size: descriptionSize }) },
+            react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: { constructor: true } }))));
+};
+exports.default = PriceDescription;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetailed.d.ts

@@ -0,0 +1,3 @@
+import { PriceDetailedProps } from '../../models';
+declare const PriceDetailed: (props: PriceDetailedProps) => JSX.Element;
+export default PriceDetailed;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetailed.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const models_1 = require("../../models");
+const PriceDescription_1 = (0, tslib_1.__importDefault)(require("./PriceDescription/PriceDescription"));
+const PriceDetails_1 = (0, tslib_1.__importDefault)(require("./PriceDetails/PriceDetails"));
+const CombinedPriceDetailed_1 = (0, tslib_1.__importDefault)(require("./CombinedPriceDetailed/CombinedPriceDetailed"));
+const SeparatePriceDetailed_1 = (0, tslib_1.__importDefault)(require("./SeparatePriceDetailed/SeparatePriceDetailed"));
+const PriceDetailed = (props) => {
+    const { priceType = models_1.PriceDetailsType.SETTINGS, items, numberGroupItems = 1, description, details, foldable, labelsDefaultText, isCombined = false, useMixedView = false, border, } = props;
+    const { titleSize: descriptionTitleSize = 'l', descriptionSize = 'm', titleColor: descriptionTitleColor = 'cornflower', } = description || {};
+    const { titleSize: detailsTitleSize = 's', descriptionSize: detailsDescriptionSize = 'm' } = details || {};
+    const getDescriptionComponent = (priceDescription) => {
+        return (react_1.default.createElement(PriceDescription_1.default, Object.assign({}, priceDescription, { titleSize: descriptionTitleSize, descriptionSize: descriptionSize, colorTitle: descriptionTitleColor, labelsDefaultText: labelsDefaultText })));
+    };
+    const getDetailsComponent = (priceDetails) => {
+        return (react_1.default.createElement(PriceDetails_1.default, { items: priceDetails, type: priceType, foldable: foldable, titleSize: detailsTitleSize, descriptionSize: detailsDescriptionSize, useMixedView: useMixedView }));
+    };
+    return (react_1.default.createElement(react_1.Fragment, null, isCombined ? (react_1.default.createElement(CombinedPriceDetailed_1.default, { items: items, numberGroupItems: numberGroupItems, border: border, useMixedView: useMixedView, getDescriptionComponent: getDescriptionComponent, getDetailsComponent: getDetailsComponent })) : (react_1.default.createElement(SeparatePriceDetailed_1.default, { items: items, border: border, getDescriptionComponent: getDescriptionComponent, getDetailsComponent: getDetailsComponent }))));
+};
+exports.default = PriceDetailed;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/List.css

@@ -0,0 +1,11 @@
+.pc-marked-list__list-item {
+  display: flex;
+}
+.pc-marked-list__text {
+  margin-left: 8px;
+}
+.pc-marked-list__img {
+  margin-top: 5px;
+  height: fit-content;
+  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xLjUgNCA1IDcuNSAxMS41IDEiIHN0cm9rZT0iIzUyODJGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
+}

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/List.d.ts

@@ -0,0 +1,7 @@
+import { PriceDetailsListProps, TextSize } from '../../../../models';
+export interface ListProps {
+    items: PriceDetailsListProps[];
+    titleSize?: TextSize;
+}
+declare const List: (props: ListProps) => JSX.Element;
+export default List;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/List.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../../utils");
+const components_1 = require("../../../../components");
+const b = (0, utils_1.block)('marked-list');
+const List = (props) => {
+    const { items = [], titleSize = 's' } = props;
+    return (react_1.default.createElement(react_1.Fragment, null, items.map((item, id) => (react_1.default.createElement("div", { key: id, className: b('list-item') },
+        react_1.default.createElement("img", { className: b('img') }),
+        react_1.default.createElement("div", { className: b('text', { size: titleSize }) },
+            react_1.default.createElement(components_1.YFMWrapper, { content: item.text, modifiers: { constructor: true } })))))));
+};
+exports.default = List;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-settings-list__title, .pc-settings-list__description {
+  font-weight: 400;
+}
+.pc-settings-list__title_size_l, .pc-settings-list__description_size_l {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+}
+.pc-settings-list__title_size_m, .pc-settings-list__description_size_m {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-settings-list__title_size_s, .pc-settings-list__description_size_s {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+.pc-settings-list__title {
+  color: var(--yc-color-text-hint);
+}

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.d.ts

@@ -0,0 +1,8 @@
+import { PriceDetailsSettingsProps, TextSize } from '../../../../models';
+export interface SettingsComponentProps {
+    items: PriceDetailsSettingsProps[];
+    titleSize?: TextSize;
+    descriptionSize?: TextSize;
+}
+declare const Settings: (props: SettingsComponentProps) => JSX.Element;
+export default Settings;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../../utils");
+const components_1 = require("../../../../components");
+const b = (0, utils_1.block)('settings-list');
+const Settings = (props) => {
+    const { items = [], titleSize = 's', descriptionSize = 'm' } = props;
+    return (react_1.default.createElement(react_1.Fragment, null, items.map((item, id) => (react_1.default.createElement("div", { key: id },
+        react_1.default.createElement("div", { className: b('title', { size: titleSize }) }, item.title),
+        react_1.default.createElement("div", { className: b('description', { size: descriptionSize }) },
+            react_1.default.createElement(components_1.YFMWrapper, { content: item.description, modifiers: { constructor: true } })))))));
+};
+exports.default = Settings;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -0,0 +1,43 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 1081px) {
+  .pc-price-details__non_foldable {
+    display: block;
+  }
+  .pc-price-details__foldable {
+    display: none;
+  }
+}
+@media (max-width: 1080px) {
+  .pc-price-details__non_foldable {
+    display: none;
+  }
+  .pc-price-details__foldable {
+    display: block;
+  }
+}
+.pc-price-details__delimiter-line {
+  border-top: 1px solid var(--yc-color-line-generic);
+}
+.pc-price-details__arrow {
+  margin: auto 10px;
+}
+.pc-price-details__foldable_title {
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-price-details__foldable_title_color_cornflower {
+  color: var(--yc-color-text-link);
+}
+.pc-price-details__foldable_title_color_black {
+  color: var(--yc-color-text-primary);
+}
+.pc-price-details__foldable_block > * {
+  padding-top: 12px;
+}
+.pc-price-details .pc-settings-list__title {
+  margin-bottom: 2px;
+}

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.d.ts

@@ -0,0 +1,11 @@
+import { PriceDetailsType, TextSize, PriceDetailsProps, PriceFoldableDetailsProps } from '../../../models';
+interface PriceDetailsExtendProps extends PriceDetailsProps {
+    type: PriceDetailsType;
+    titleSize?: TextSize;
+    descriptionSize?: TextSize;
+    foldable?: PriceFoldableDetailsProps;
+    useMixedView?: boolean;
+    className?: string;
+}
+declare const PriceDetails: (props: PriceDetailsExtendProps) => JSX.Element;
+export default PriceDetails;

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../utils");
+const components_1 = require("../../../components");
+const models_1 = require("../../../models");
+const List_1 = (0, tslib_1.__importDefault)(require("./Details/List"));
+const Settings_1 = (0, tslib_1.__importDefault)(require("./Details/Settings"));
+const b = (0, utils_1.block)('price-details');
+const PriceDetails = (props) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const toggleOpen = (0, react_1.useCallback)(() => {
+        setIsOpened(!isOpened);
+    }, [isOpened]);
+    const { items = [], type = models_1.PriceDetailsType.SETTINGS, titleSize = 's', descriptionSize = 'm', foldable, useMixedView, className, } = props;
+    const { title: foldableTitle, size: foldableSize = descriptionSize, titleColor: foldableColor = 'cornflower', } = foldable || {};
+    const getPriceDetails = () => {
+        switch (type) {
+            case models_1.PriceDetailsType.MARKED_LIST:
+                return react_1.default.createElement(List_1.default, { items: items, titleSize: titleSize });
+            case models_1.PriceDetailsType.SETTINGS:
+            default:
+                return (react_1.default.createElement(Settings_1.default, { items: items, titleSize: titleSize, descriptionSize: descriptionSize }));
+        }
+    };
+    const getFoldableBlock = () => {
+        return react_1.default.createElement("div", { className: b('foldable_block') }, getPriceDetails());
+    };
+    const getFoldableTitle = () => {
+        return (react_1.default.createElement("div", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen },
+            foldableTitle,
+            react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 14, type: 'vertical', className: b('arrow') })));
+    };
+    const getFoldableComponent = (customClassName = '') => {
+        return (react_1.default.createElement("div", { className: customClassName },
+            getFoldableTitle(),
+            react_1.default.createElement(components_1.Foldable, { isOpened: isOpened }, getFoldableBlock())));
+    };
+    const getNonFoldableComponent = (customClassName = '') => {
+        return react_1.default.createElement("div", { className: customClassName }, getFoldableBlock());
+    };
+    const getComponentMixedView = () => {
+        if (foldable) {
+            return (react_1.default.createElement(react_1.Fragment, null,
+                getFoldableComponent(b('foldable')),
+                getNonFoldableComponent(b('non_foldable'))));
+        }
+        return getNonFoldableComponent(b('delimiter-line'));
+    };
+    const getComponentSimpleView = () => {
+        return foldable ? getFoldableComponent() : getNonFoldableComponent(b('delimiter-line'));
+    };
+    return (react_1.default.createElement("div", { className: b(null, className) }, useMixedView ? getComponentMixedView() : getComponentSimpleView()));
+};
+exports.default = PriceDetails;

package/build/cjs/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.css

@@ -0,0 +1,9 @@
+.pc-separate-price-detailed-block .pc-price-description {
+  margin-bottom: 0;
+}
+.pc-separate-price-detailed-block .pc-price-details > * {
+  padding-top: 12px;
+}
+.pc-separate-price-detailed-block .pc-price-details {
+  margin-top: 24px;
+}

package/build/cjs/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CardBorder, PriceDescriptionProps, PriceDetailsListProps, PriceDetailsSettingsProps, PriceItemProps } from '../../../models';
+interface SeparatePriceDetailedProps {
+    items: PriceItemProps[];
+    getDescriptionComponent: (priceDescription: PriceDescriptionProps) => JSX.Element;
+    getDetailsComponent: (priceDetails?: PriceDetailsSettingsProps[] | PriceDetailsListProps[]) => JSX.Element;
+    border?: CardBorder;
+}
+declare const SeparatePriceDetailed: (props: SeparatePriceDetailedProps) => JSX.Element;
+export default SeparatePriceDetailed;

package/build/cjs/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../utils");
+const components_1 = require("../../../components");
+const b = (0, utils_1.block)('separate-price-detailed-block');
+const SeparatePriceDetailed = (props) => {
+    const { items, border, getDescriptionComponent, getDetailsComponent } = props;
+    return (react_1.default.createElement(react_1.Fragment, null, items.map((item, id) => (react_1.default.createElement(components_1.CardBase, { key: id, className: b(), border: border },
+        react_1.default.createElement(components_1.CardBase.Content, null,
+            getDescriptionComponent(item),
+            getDetailsComponent(item.items)))))));
+};
+exports.default = SeparatePriceDetailed;