@gravity-ui/page-constructor 8.1.2-alpha.0 → 8.2.0-alpha.0

package/build/cjs/demo/HeroAndMedia.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../.storybook/utils.js");
+const PageConstructor_1 = require("../containers/PageConstructor/index.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/Banner/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../blocks/Companies/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../blocks/Header/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../blocks/Info/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../blocks/Media/__stories__/data.json"));
+const data_json_6 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+exports.default = {
+    title: 'Lab/Tokenization/Blocks/HeroAndMedia',
+    component: PageConstructor_1.PageConstructor,
+};
+const Template = ({ navigation, custom = {}, }) => ((0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, custom: custom, content: {
+        blocks: [
+            // header-block: default with action buttons
+            (0, utils_1.blockTransform)(data_json_3.default.default),
+            // header-block: with breadcrumbs + light background
+            (0, utils_1.blockTransform)(data_json_3.default.breadcrumbs[0]),
+            // header-block: with breadcrumbs + dark theme
+            (0, utils_1.blockTransform)(data_json_3.default.breadcrumbs[1]),
+            // header-block: with image
+            (0, utils_1.blockTransform)(data_json_3.default.image),
+            // header-block: with background image and color (media variant)
+            (0, utils_1.blockTransform)({ type: 'header-block', ...data_json_3.default.media.image }),
+            // banner-block: light theme with themed image
+            (0, utils_1.blockTransform)(data_json_1.default.default.content),
+            // banner-block: forced dark theme
+            (0, utils_1.blockTransform)(data_json_1.default.darkTheme.content),
+            // media-block: default with image
+            (0, utils_1.blockTransform)(data_json_5.default.default),
+            // media-block: image slider
+            (0, utils_1.blockTransform)(data_json_5.default.imageSlider),
+            // media-block: youtube embed
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.youtube }),
+            // media-block: video with controls
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.staticWithControls }),
+            // media-block: video with preview
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.videoWithPreview }),
+            // companies-block: title only
+            (0, utils_1.blockTransform)(data_json_2.default.default.content),
+            // companies-block: with description
+            (0, utils_1.blockTransform)(data_json_2.default.withDescription.content),
+            // info-block: dark theme (default)
+            (0, utils_1.blockTransform)(data_json_4.default.default),
+            // info-block: light theme with background color
+            (0, utils_1.blockTransform)({ type: 'info-block', ...data_json_4.default.light }),
+        ],
+    } }));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    navigation: data_json_6.default.navigation,
+};
+//# sourceMappingURL=HeroAndMedia.stories.js.map

package/build/cjs/demo/HeroAndMedia.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAsD;AACtD,4EAA8D;AAG9D,+FAAgE;AAChE,kGAAsE;AACtE,+FAAgE;AAChE,6FAA4D;AAC5D,8FAA8D;AAC9D,4FAA0D;AAE1D,kBAAe;IACX,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,4CAA4C;YAC5C,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC;YAClC,oDAAoD;YACpD,IAAA,sBAAc,EAAC,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,2BAA2B;YAC3B,IAAA,sBAAc,EAAC,mBAAU,CAAC,KAAK,CAAC;YAChC,gEAAgE;YAChE,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,mBAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;YAEjE,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,IAAA,sBAAc,EAAC,mBAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,IAAA,sBAAc,EAAC,mBAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,IAAA,sBAAc,EAAC,mBAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,IAAA,sBAAc,EAAC,mBAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,mBAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,CACL,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,mBAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport headerData from '../blocks/Header/__stories__/data.json';\nimport infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/HeroAndMedia',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructor\n        navigation={navigation}\n        custom={custom}\n        content={\n            {\n                blocks: [\n                    // header-block: default with action buttons\n                    blockTransform(headerData.default),\n                    // header-block: with breadcrumbs + light background\n                    blockTransform(headerData.breadcrumbs[0]),\n                    // header-block: with breadcrumbs + dark theme\n                    blockTransform(headerData.breadcrumbs[1]),\n                    // header-block: with image\n                    blockTransform(headerData.image),\n                    // header-block: with background image and color (media variant)\n                    blockTransform({type: 'header-block', ...headerData.media.image}),\n\n                    // banner-block: light theme with themed image\n                    blockTransform(bannerData.default.content),\n                    // banner-block: forced dark theme\n                    blockTransform(bannerData.darkTheme.content),\n\n                    // media-block: default with image\n                    blockTransform(mediaData.default),\n                    // media-block: image slider\n                    blockTransform(mediaData.imageSlider),\n                    // media-block: youtube embed\n                    blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n                    // media-block: video with controls\n                    blockTransform({type: 'media-block', ...mediaData.video.staticWithControls}),\n                    // media-block: video with preview\n                    blockTransform({type: 'media-block', ...mediaData.video.videoWithPreview}),\n\n                    // companies-block: title only\n                    blockTransform(companiesData.default.content),\n                    // companies-block: with description\n                    blockTransform(companiesData.withDescription.content),\n\n                    // info-block: dark theme (default)\n                    blockTransform(infoData.default),\n                    // info-block: light theme with background color\n                    blockTransform({type: 'info-block', ...infoData.light}),\n                ],\n            } as PageContent\n        }\n    />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    navigation: navData.navigation as NavigationData,\n};\n"]}

package/build/cjs/demo/InteractiveAndForms.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { CustomConfig, NavigationData } from "../models/index.js";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    navigation: NavigationData;
+    custom?: CustomConfig;
+}>;

package/build/cjs/demo/InteractiveAndForms.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const maps_1 = require("../../.storybook/maps.js");
+const utils_1 = require("../../.storybook/utils.js");
+const PageConstructor_1 = require("../containers/PageConstructor/index.js");
+const mapsContext_1 = require("../context/mapsContext/mapsContext.js");
+const mapsProvider_1 = require("../context/mapsContext/mapsProvider.js");
+const CustomButton_1 = require("../navigation/__stories__/CustomButton/CustomButton.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/FilterBlock/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../blocks/Form/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../blocks/Icons/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../blocks/Map/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../blocks/Share/__stories__/data.json"));
+const data_json_6 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+exports.default = {
+    title: 'Lab/Tokenization/Blocks/InteractiveAndForms',
+    component: PageConstructor_1.PageConstructor,
+};
+const Template = ({ navigation, custom = {}, }) => ((0, jsx_runtime_1.jsx)(mapsProvider_1.MapProvider, { scriptSrc: maps_1.scriptsSrc[mapsContext_1.MapType.Yandex], apiKey: maps_1.ymapApiKeyForStorybook, type: mapsContext_1.MapType.Yandex, children: (0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, custom: custom, content: {
+            blocks: [
+                // form-block: hubspot form
+                (0, utils_1.blockTransform)(data_json_2.default.default),
+                // form-block: with background color
+                (0, utils_1.blockTransform)({ ...data_json_2.default.default, ...data_json_2.default.withBackground }),
+                // form-block: with background image
+                (0, utils_1.blockTransform)({ ...data_json_2.default.default, ...data_json_2.default.withBackgroundImage }),
+                // form-block: yandex form
+                (0, utils_1.blockTransform)(data_json_2.default.yandexForm),
+                // filter-block: with tag filtering and layout items
+                (0, utils_1.blockTransform)(data_json_1.default.default),
+                // icons-block: minimal (no title)
+                (0, utils_1.blockTransform)(data_json_3.default.default.content),
+                // icons-block: with title and description
+                (0, utils_1.blockTransform)(data_json_3.default.withDescription.content),
+                // share-block: default (no title)
+                (0, utils_1.blockTransform)(data_json_5.default.default.content),
+                // share-block: with custom title
+                (0, utils_1.blockTransform)(data_json_5.default.customTitle.content),
+                // map-block: default with yandex map
+                (0, utils_1.blockTransform)({
+                    type: 'map-block',
+                    title: data_json_4.default.common.title,
+                    description: data_json_4.default.common.description,
+                    map: data_json_4.default.ymap,
+                }),
+                // map-block: with additional info and links
+                (0, utils_1.blockTransform)({
+                    type: 'map-block',
+                    title: data_json_4.default.common.title,
+                    description: data_json_4.default.common.description,
+                    additionalInfo: data_json_4.default.common.additionalInfo,
+                    links: data_json_4.default.common.links,
+                    map: { ...data_json_4.default.ymap, id: 'common-places-2' },
+                }),
+                // map-block: with buttons
+                (0, utils_1.blockTransform)({
+                    type: 'map-block',
+                    title: data_json_4.default.common.title,
+                    description: data_json_4.default.common.description,
+                    buttons: data_json_4.default.common.buttons,
+                    map: { ...data_json_4.default.ymap, id: 'common-places-3' },
+                }),
+            ],
+        } }) }));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    custom: {
+        navigation: {
+            'custom-item': CustomButton_1.CustomButton,
+        },
+    },
+    navigation: {
+        ...data_json_6.default.navigation,
+        header: {
+            ...data_json_6.default.navigation.header,
+            customMobileHeaderItems: [{ type: 'custom-item' }],
+        },
+    },
+};
+//# sourceMappingURL=InteractiveAndForms.stories.js.map

package/build/cjs/demo/InteractiveAndForms.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveAndForms.stories.js","sourceRoot":"../../../src","sources":["demo/InteractiveAndForms.stories.tsx"],"names":[],"mappings":";;;;;AAEA,mDAAyE;AACzE,qDAAsD;AACtD,4EAA8D;AAC9D,uEAA2D;AAC3D,yEAAgE;AAEhE,yFAAiF;AAEjF,oGAAqE;AACrE,6FAA4D;AAC5D,8FAA8D;AAC9D,4FAA0D;AAC1D,8FAA8D;AAC9D,4FAA0D;AAE1D,kBAAe;IACX,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,uBAAC,0BAAW,IACR,SAAS,EAAE,iBAAU,CAAC,qBAAO,CAAC,MAAM,CAAC,EACrC,MAAM,EAAE,6BAAsB,EAC9B,IAAI,EAAE,qBAAO,CAAC,MAAM,YAEpB,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;YACI,MAAM,EAAE;gBACJ,2BAA2B;gBAC3B,IAAA,sBAAc,EAAC,mBAAQ,CAAC,OAAO,CAAC;gBAChC,oCAAoC;gBACpC,IAAA,sBAAc,EAAC,EAAC,GAAG,mBAAQ,CAAC,OAAO,EAAE,GAAG,mBAAQ,CAAC,cAAc,EAAC,CAAC;gBACjE,oCAAoC;gBACpC,IAAA,sBAAc,EAAC,EAAC,GAAG,mBAAQ,CAAC,OAAO,EAAE,GAAG,mBAAQ,CAAC,mBAAmB,EAAC,CAAC;gBACtE,0BAA0B;gBAC1B,IAAA,sBAAc,EAAC,mBAAQ,CAAC,UAAU,CAAC;gBAEnC,oDAAoD;gBACpD,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC;gBAElC,kCAAkC;gBAClC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC,OAAO,CAAC;gBACzC,0CAA0C;gBAC1C,IAAA,sBAAc,EAAC,mBAAS,CAAC,eAAe,CAAC,OAAO,CAAC;gBAEjD,kCAAkC;gBAClC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC,OAAO,CAAC;gBACzC,iCAAiC;gBACjC,IAAA,sBAAc,EAAC,mBAAS,CAAC,WAAW,CAAC,OAAO,CAAC;gBAE7C,qCAAqC;gBACrC,IAAA,sBAAc,EAAC;oBACX,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,mBAAO,CAAC,MAAM,CAAC,KAAK;oBAC3B,WAAW,EAAE,mBAAO,CAAC,MAAM,CAAC,WAAW;oBACvC,GAAG,EAAE,mBAAO,CAAC,IAAI;iBACpB,CAAC;gBACF,4CAA4C;gBAC5C,IAAA,sBAAc,EAAC;oBACX,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,mBAAO,CAAC,MAAM,CAAC,KAAK;oBAC3B,WAAW,EAAE,mBAAO,CAAC,MAAM,CAAC,WAAW;oBACvC,cAAc,EAAE,mBAAO,CAAC,MAAM,CAAC,cAAc;oBAC7C,KAAK,EAAE,mBAAO,CAAC,MAAM,CAAC,KAAK;oBAC3B,GAAG,EAAE,EAAC,GAAG,mBAAO,CAAC,IAAI,EAAE,EAAE,EAAE,iBAAiB,EAAC;iBAChD,CAAC;gBACF,0BAA0B;gBAC1B,IAAA,sBAAc,EAAC;oBACX,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,mBAAO,CAAC,MAAM,CAAC,KAAK;oBAC3B,WAAW,EAAE,mBAAO,CAAC,MAAM,CAAC,WAAW;oBACvC,OAAO,EAAE,mBAAO,CAAC,MAAM,CAAC,OAAO;oBAC/B,GAAG,EAAE,EAAC,GAAG,mBAAO,CAAC,IAAI,EAAE,EAAE,EAAE,iBAAiB,EAAC;iBAChD,CAAC;aACL;SACW,GAEtB,GACQ,CACjB,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,MAAM,EAAE;QACJ,UAAU,EAAE;YACR,aAAa,EAAE,2BAAY;SAC9B;KACJ;IACD,UAAU,EAAE;QACR,GAAG,mBAAO,CAAC,UAAU;QACrB,MAAM,EAAE;YACJ,GAAG,mBAAO,CAAC,UAAU,CAAC,MAAM;YAC5B,uBAAuB,EAAE,CAAC,EAAC,IAAI,EAAE,aAAa,EAAC,CAAC;SACnD;KACyB;CACjC,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {scriptsSrc, ymapApiKeyForStorybook} from '../../.storybook/maps';\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {MapType} from '../context/mapsContext/mapsContext';\nimport {MapProvider} from '../context/mapsContext/mapsProvider';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\nimport {CustomButton} from '../navigation/__stories__/CustomButton/CustomButton';\n\nimport filterData from '../blocks/FilterBlock/__stories__/data.json';\nimport formData from '../blocks/Form/__stories__/data.json';\nimport iconsData from '../blocks/Icons/__stories__/data.json';\nimport mapData from '../blocks/Map/__stories__/data.json';\nimport shareData from '../blocks/Share/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/InteractiveAndForms',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <MapProvider\n        scriptSrc={scriptsSrc[MapType.Yandex]}\n        apiKey={ymapApiKeyForStorybook}\n        type={MapType.Yandex}\n    >\n        <PageConstructor\n            navigation={navigation}\n            custom={custom}\n            content={\n                {\n                    blocks: [\n                        // form-block: hubspot form\n                        blockTransform(formData.default),\n                        // form-block: with background color\n                        blockTransform({...formData.default, ...formData.withBackground}),\n                        // form-block: with background image\n                        blockTransform({...formData.default, ...formData.withBackgroundImage}),\n                        // form-block: yandex form\n                        blockTransform(formData.yandexForm),\n\n                        // filter-block: with tag filtering and layout items\n                        blockTransform(filterData.default),\n\n                        // icons-block: minimal (no title)\n                        blockTransform(iconsData.default.content),\n                        // icons-block: with title and description\n                        blockTransform(iconsData.withDescription.content),\n\n                        // share-block: default (no title)\n                        blockTransform(shareData.default.content),\n                        // share-block: with custom title\n                        blockTransform(shareData.customTitle.content),\n\n                        // map-block: default with yandex map\n                        blockTransform({\n                            type: 'map-block',\n                            title: mapData.common.title,\n                            description: mapData.common.description,\n                            map: mapData.ymap,\n                        }),\n                        // map-block: with additional info and links\n                        blockTransform({\n                            type: 'map-block',\n                            title: mapData.common.title,\n                            description: mapData.common.description,\n                            additionalInfo: mapData.common.additionalInfo,\n                            links: mapData.common.links,\n                            map: {...mapData.ymap, id: 'common-places-2'},\n                        }),\n                        // map-block: with buttons\n                        blockTransform({\n                            type: 'map-block',\n                            title: mapData.common.title,\n                            description: mapData.common.description,\n                            buttons: mapData.common.buttons,\n                            map: {...mapData.ymap, id: 'common-places-3'},\n                        }),\n                    ],\n                } as PageContent\n            }\n        />\n    </MapProvider>\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    custom: {\n        navigation: {\n            'custom-item': CustomButton,\n        },\n    },\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            customMobileHeaderItems: [{type: 'custom-item'}],\n        },\n    } as unknown as NavigationData,\n};\n"]}

package/build/cjs/models/constructor-items/common.d.ts

@@ -321,7 +321,7 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     theme?: TextTheme;
     analyticsEvents?: AnalyticsEventsProp;
 }
-export interface TitleItemProps extends Justifyable, TitleItemBaseProps {
+export interface TitleItemProps extends Justifyable, TitleItemBaseProps, AnalyticsEventsBase {
     navTitle?: string;
     anchor?: string;
 }

package/build/cjs/models/constructor-items/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAQA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB;AAuED,SAAS;AAET,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,sBAAN,MAAM,QAIjB","sourcesContent":["import * as React from 'react';\n\nimport * as icons from '@gravity-ui/icons';\nimport {ButtonView, IconData, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n    Column = 'column',\n    Line = 'line',\n}\n\nexport enum PriceDetailsType {\n    MARKED_LIST = 'marked-list',\n    SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    YELLOW = 'yellow',\n    PURPLE = 'purple',\n    RED = 'red',\n}\n\nexport enum PlayButtonType {\n    Default = 'default',\n    Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n    Blue = 'blue',\n    Grey = 'grey',\n}\n\nexport enum CustomControlsType {\n    WithMuteButton = 'with-mute-button',\n    WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n    Left = 'left',\n    Right = 'right',\n    Center = 'center',\n}\n\nexport enum MediaVideoType {\n    Default = 'default',\n    Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n    Default = 'default',\n    Custom = 'custom',\n}\n\nexport enum QuoteType {\n    Chevron = 'chevron', // « »\n    EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' | 'dark';\nexport type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l';\nexport type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\nexport type HeaderWidth = 's' | 'm' | 'l';\nexport type HeaderImageSize = 's' | 'm';\nexport type HeaderOffset = 'default' | 'large';\nexport type Justify = 'start' | 'center' | 'end';\nexport type ColumnsCount = 1 | 2 | 3 | 4;\nexport type LegendTableMarkerType = 'disk' | 'tick';\nexport type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';\nexport type MediaDirection = 'media-content' | 'content-media';\nexport type PriceDescriptionColor = 'cornflower' | 'black';\nexport type ContentSize = 's' | 'm' | 'l';\nexport type ContentTextSize = 's' | 'm' | 'l';\nexport type ContentTheme = 'default' | 'dark' | 'light';\nexport type FileLinkType = 'vertical' | 'horizontal';\nexport type ImageCardMargins = 's' | 'm';\nexport type LayoutItemContentMargin = 'm' | 'l';\nexport type GravityIconProps = string | {name: keyof typeof icons; color: 'brand' | 'text-color'};\n\n// modifiers\nexport interface Themable {\n    theme?: TextTheme;\n}\n\nexport interface Justifyable {\n    justify?: Justify;\n}\n\nexport interface Stylable {\n    className?: string;\n}\n\nexport interface Animatable {\n    animated?: boolean;\n}\n\nexport interface Tabbable {\n    tabIndex?: number;\n}\n\nexport interface Roleable {\n    role?: React.AriaRole;\n}\n\nexport interface AriaProps {\n    ariaProps?: React.AriaAttributes;\n}\n\n//common props\nexport interface Background {\n    image?: string;\n    color?: string;\n}\n\nexport interface AnchorProps {\n    text: string;\n    url: string;\n}\n\n/**\n * @deprecated Component VideoBlock will be deleted, which uses this logic\n */\ninterface LoopProps {\n    start: number;\n    end?: number;\n}\n\n// images\n\nexport enum Device {\n    Desktop = 'desktop',\n    Mobile = 'mobile',\n    Tablet = 'tablet',\n}\n\nexport interface ImageInfoProps\n    extends Pick<\n            React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n            'aria-describedby' | 'loading'\n        >,\n        ImageDevicesVisibleProps {\n    alt?: string;\n    fetchPriority?: 'high' | 'low' | 'auto';\n    disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n    src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n    [Device.Desktop]: string;\n    [Device.Mobile]: string;\n    [Device.Tablet]?: string;\n}\n\nexport interface ImageDevicesVisibleProps {\n    hide?: boolean | Partial<Record<Device, boolean>>;\n}\n\nexport type ImageProps = string | ImageObjectProps | ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n    extends React.HTMLProps<HTMLDivElement>,\n        Partial<ImageDeviceProps>,\n        Partial<ImageObjectProps>,\n        QAProps,\n        ImageDevicesVisibleProps {\n    style?: React.CSSProperties;\n    imageClassName?: string;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n    src: string[];\n    type?: MediaVideoType;\n    loop?: LoopProps | boolean;\n    muted?: boolean;\n    autoplay?: boolean;\n    elapsedTime?: number;\n    playButton?: PlayButtonProps;\n    controls?: MediaVideoControlsType;\n    customControlsOptions?: CustomControlsOptions;\n    ariaLabel?: string;\n    contain?: boolean;\n    onVideoEnd?: () => void;\n    ref?: React.Ref<HTMLVideoElement | null>;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n    url: string;\n    urlTitle?: string;\n    text?: string;\n    textSize?: TextSize;\n    theme?: LinkTheme;\n    colorTheme?: TextTheme;\n    arrow?: boolean;\n    target?: string;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n    href: string;\n    text: React.ReactNode;\n    type?: FileLinkType;\n    textSize?: TextSize;\n    theme?: ContentTheme;\n    urlTitle?: string;\n    onClick?: () => void;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n    | ButtonView\n    | 'github'\n    | 'app-store'\n    | 'google-play'\n    | 'scale'\n    | 'monochrome';\n\nexport interface ButtonProps extends AnalyticsEventsBase {\n    text: string;\n    url: string;\n    urlTitle?: string;\n    primary?: boolean;\n    theme?: ButtonTheme;\n    img?: ButtonImageProps | string;\n    target?: string;\n    size?: UikitButtonProps['size'];\n    width?: UikitButtonProps['width'];\n    extraProps?: UikitButtonProps['extraProps'];\n}\n\nexport type ButtonImagePosition = 'left' | 'right';\n\nexport interface ButtonImageProps {\n    url?: string;\n    position?: ButtonImagePosition;\n    alt?: string;\n    iconData?: IconData;\n    iconSize?: number;\n    className?: string;\n}\n\nexport interface CustomControlsOptions {\n    type?: CustomControlsType;\n    muteButtonShown?: boolean;\n    positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n    type?: PlayButtonType;\n    theme?: PlayButtonThemes;\n    text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n    video: MediaVideoProps;\n    height?: number;\n    ratio?: number | 'auto';\n    previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n    videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n    youtube: string;\n    previewImg?: string;\n    fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n    image: ImageProps | ImageProps[] | ImageDeviceProps;\n    video?: MediaVideoProps;\n    parallax?: boolean;\n    height?: number;\n    disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n    dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n    iframe: IframeProps;\n    margins?: boolean;\n}\n\nexport interface MediaProps\n    extends Animatable,\n        Partial<MediaComponentDataLensProps>,\n        Partial<MediaComponentYoutubeProps>,\n        Partial<MediaComponentVideoIframeProps>,\n        Partial<MediaComponentImageProps>,\n        Partial<MediaComponentIframeProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n    videoMicrodata?: {\n        name?: string;\n        description?: string;\n        duration?: string;\n        uploadDate?: string;\n        contentUrl?: string;\n        thumbnailUrl?: string;\n    };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n    fullWidthMedia?: boolean;\n    className?: string;\n    mediaClassName?: string;\n}\n\nexport type Coordinate = [number, number];\n\nexport interface MapBaseProps {\n    zoom?: number;\n    className?: string;\n    forceAspectRatio?: boolean;\n}\n\nexport interface GMapProps extends MapBaseProps {\n    address: string;\n}\n\nexport type YMapMargin =\n    | number\n    | [vertical: number, horizontal: number]\n    | [top: number, right: number, bottom: number, left: number];\n\nexport interface YMapCopyrightPosition {\n    top?: number;\n    right?: number;\n    bottom?: number;\n    left?: number;\n}\n\nexport interface YMapProps extends MapBaseProps {\n    markers: YMapMarker[];\n    disableControls?: boolean;\n    disableBalloons?: boolean;\n    areaMargin?: YMapMargin;\n    copyrightPosition?: YMapCopyrightPosition;\n    id: string;\n}\n\nexport interface YMapMarker {\n    address?: string;\n    coordinate?: Coordinate;\n    label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n    iconCaption?: string;\n    iconContent?: string;\n    iconColor?: string;\n    iconImageHref?: string;\n    iconImageSize?: [number, number];\n    iconImageOffset?: [number, number];\n    iconImageClipRect?: [[number, number], [number, number]];\n    iconLayout?: 'default#image';\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    iconShape?: Record<string, any>;\n    preset?: string;\n}\n\nexport interface YMapMarkerPrivate extends YMapMarker {\n    label?: YMapMarkerLabelPrivate;\n}\n\nexport interface YMapMarkerLabelPrivate extends YMapMarkerLabel {\n    cursor?: string;\n    interactivityModel?: string;\n}\n\nexport type MapProps = GMapProps | YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n    id: string;\n    theme: 'dark' | 'light';\n}\n\nexport interface IframeProps {\n    src: string;\n    width?: number;\n    height?: number;\n    title?: string;\n    name?: string;\n}\n\nexport type DataLensProps = string | DataLensObjectProps;\n\nexport interface AuthorItem {\n    firstName: string;\n    secondName: string;\n    description?: string;\n    avatar?: ThemeSupporting<ImageProps> | JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps {\n    items: {\n        url: string;\n        text: React.ReactNode;\n    }[];\n    theme?: TextTheme;\n    analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps {\n    navTitle?: string;\n    anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n    text: string;\n    textSize?: TextSize;\n    url?: string;\n    urlTitle?: string;\n    custom?: string | React.ReactNode;\n    onClick?: () => void;\n}\n\nexport type MediaView = 'fit' | 'full';\n\n// card\nexport type MediaBorder = 'shadow' | 'line' | 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' | 'footer';\n\nexport interface CardBaseProps {\n    border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n    controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n    title: string;\n    detailedTitle?: string;\n    description: string;\n    label?: {\n        color: PriceLabelColor;\n        text?: string;\n        size?: TextSize;\n    };\n}\n\nexport interface PriceDetailsSettingsProps {\n    title: string;\n    description: string;\n}\n\nexport interface PriceDetailsListProps {\n    text: string;\n}\n\nexport interface PriceDetailsProps {\n    items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n    extends PriceDetailsProps,\n        PriceDescriptionProps,\n        AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n    title: string;\n    size?: TextSize;\n    titleColor?: PriceDescriptionColor;\n}\n\n/** @deprecated */\nexport interface PriceDetailedProps extends CardBaseProps {\n    items: PriceItemProps[];\n    description?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n        titleColor?: PriceDescriptionColor;\n    };\n    details?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n    };\n    priceType?: PriceDetailsType;\n    numberGroupItems?: 3 | 4 | 5;\n    isCombined?: boolean;\n    useMixedView?: boolean;\n    foldable?: PriceFoldableDetailsProps;\n    labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n    author: AuthorItem;\n    className?: string;\n    authorContainerClassName?: string;\n    type?: AuthorType;\n    theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n    title?: TitleItemProps | string;\n    subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n    id: number | string;\n    containerId?: string;\n    theme?: string;\n    className?: string;\n    headerHeight?: number;\n    customFormOrigin?: string;\n    customFormSection?: string;\n    params?: {[key: string]: string};\n\n    onSubmit?: () => void;\n    onLoad?: () => void;\n}\n\nexport interface WithBorder {\n    border?: MediaBorder;\n    /**\n     * @deprecated use custom class for media-component\n     */\n    disableShadow?: boolean;\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAQA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB;AAuED,SAAS;AAET,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,sBAAN,MAAM,QAIjB","sourcesContent":["import * as React from 'react';\n\nimport * as icons from '@gravity-ui/icons';\nimport {ButtonView, IconData, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n    Column = 'column',\n    Line = 'line',\n}\n\nexport enum PriceDetailsType {\n    MARKED_LIST = 'marked-list',\n    SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    YELLOW = 'yellow',\n    PURPLE = 'purple',\n    RED = 'red',\n}\n\nexport enum PlayButtonType {\n    Default = 'default',\n    Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n    Blue = 'blue',\n    Grey = 'grey',\n}\n\nexport enum CustomControlsType {\n    WithMuteButton = 'with-mute-button',\n    WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n    Left = 'left',\n    Right = 'right',\n    Center = 'center',\n}\n\nexport enum MediaVideoType {\n    Default = 'default',\n    Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n    Default = 'default',\n    Custom = 'custom',\n}\n\nexport enum QuoteType {\n    Chevron = 'chevron', // « »\n    EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' | 'dark';\nexport type TextSize = 'xs' | 's' | 'sm' | 'm' | 'l';\nexport type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\nexport type HeaderWidth = 's' | 'm' | 'l';\nexport type HeaderImageSize = 's' | 'm';\nexport type HeaderOffset = 'default' | 'large';\nexport type Justify = 'start' | 'center' | 'end';\nexport type ColumnsCount = 1 | 2 | 3 | 4;\nexport type LegendTableMarkerType = 'disk' | 'tick';\nexport type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';\nexport type MediaDirection = 'media-content' | 'content-media';\nexport type PriceDescriptionColor = 'cornflower' | 'black';\nexport type ContentSize = 's' | 'm' | 'l';\nexport type ContentTextSize = 's' | 'm' | 'l';\nexport type ContentTheme = 'default' | 'dark' | 'light';\nexport type FileLinkType = 'vertical' | 'horizontal';\nexport type ImageCardMargins = 's' | 'm';\nexport type LayoutItemContentMargin = 'm' | 'l';\nexport type GravityIconProps = string | {name: keyof typeof icons; color: 'brand' | 'text-color'};\n\n// modifiers\nexport interface Themable {\n    theme?: TextTheme;\n}\n\nexport interface Justifyable {\n    justify?: Justify;\n}\n\nexport interface Stylable {\n    className?: string;\n}\n\nexport interface Animatable {\n    animated?: boolean;\n}\n\nexport interface Tabbable {\n    tabIndex?: number;\n}\n\nexport interface Roleable {\n    role?: React.AriaRole;\n}\n\nexport interface AriaProps {\n    ariaProps?: React.AriaAttributes;\n}\n\n//common props\nexport interface Background {\n    image?: string;\n    color?: string;\n}\n\nexport interface AnchorProps {\n    text: string;\n    url: string;\n}\n\n/**\n * @deprecated Component VideoBlock will be deleted, which uses this logic\n */\ninterface LoopProps {\n    start: number;\n    end?: number;\n}\n\n// images\n\nexport enum Device {\n    Desktop = 'desktop',\n    Mobile = 'mobile',\n    Tablet = 'tablet',\n}\n\nexport interface ImageInfoProps\n    extends Pick<\n            React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n            'aria-describedby' | 'loading'\n        >,\n        ImageDevicesVisibleProps {\n    alt?: string;\n    fetchPriority?: 'high' | 'low' | 'auto';\n    disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n    src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n    [Device.Desktop]: string;\n    [Device.Mobile]: string;\n    [Device.Tablet]?: string;\n}\n\nexport interface ImageDevicesVisibleProps {\n    hide?: boolean | Partial<Record<Device, boolean>>;\n}\n\nexport type ImageProps = string | ImageObjectProps | ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n    extends React.HTMLProps<HTMLDivElement>,\n        Partial<ImageDeviceProps>,\n        Partial<ImageObjectProps>,\n        QAProps,\n        ImageDevicesVisibleProps {\n    style?: React.CSSProperties;\n    imageClassName?: string;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n    src: string[];\n    type?: MediaVideoType;\n    loop?: LoopProps | boolean;\n    muted?: boolean;\n    autoplay?: boolean;\n    elapsedTime?: number;\n    playButton?: PlayButtonProps;\n    controls?: MediaVideoControlsType;\n    customControlsOptions?: CustomControlsOptions;\n    ariaLabel?: string;\n    contain?: boolean;\n    onVideoEnd?: () => void;\n    ref?: React.Ref<HTMLVideoElement | null>;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n    url: string;\n    urlTitle?: string;\n    text?: string;\n    textSize?: TextSize;\n    theme?: LinkTheme;\n    colorTheme?: TextTheme;\n    arrow?: boolean;\n    target?: string;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n    href: string;\n    text: React.ReactNode;\n    type?: FileLinkType;\n    textSize?: TextSize;\n    theme?: ContentTheme;\n    urlTitle?: string;\n    onClick?: () => void;\n    extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n    | ButtonView\n    | 'github'\n    | 'app-store'\n    | 'google-play'\n    | 'scale'\n    | 'monochrome';\n\nexport interface ButtonProps extends AnalyticsEventsBase {\n    text: string;\n    url: string;\n    urlTitle?: string;\n    primary?: boolean;\n    theme?: ButtonTheme;\n    img?: ButtonImageProps | string;\n    target?: string;\n    size?: UikitButtonProps['size'];\n    width?: UikitButtonProps['width'];\n    extraProps?: UikitButtonProps['extraProps'];\n}\n\nexport type ButtonImagePosition = 'left' | 'right';\n\nexport interface ButtonImageProps {\n    url?: string;\n    position?: ButtonImagePosition;\n    alt?: string;\n    iconData?: IconData;\n    iconSize?: number;\n    className?: string;\n}\n\nexport interface CustomControlsOptions {\n    type?: CustomControlsType;\n    muteButtonShown?: boolean;\n    positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n    type?: PlayButtonType;\n    theme?: PlayButtonThemes;\n    text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n    video: MediaVideoProps;\n    height?: number;\n    ratio?: number | 'auto';\n    previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n    videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n    youtube: string;\n    previewImg?: string;\n    fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n    image: ImageProps | ImageProps[] | ImageDeviceProps;\n    video?: MediaVideoProps;\n    parallax?: boolean;\n    height?: number;\n    disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n    dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n    iframe: IframeProps;\n    margins?: boolean;\n}\n\nexport interface MediaProps\n    extends Animatable,\n        Partial<MediaComponentDataLensProps>,\n        Partial<MediaComponentYoutubeProps>,\n        Partial<MediaComponentVideoIframeProps>,\n        Partial<MediaComponentImageProps>,\n        Partial<MediaComponentIframeProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n    videoMicrodata?: {\n        name?: string;\n        description?: string;\n        duration?: string;\n        uploadDate?: string;\n        contentUrl?: string;\n        thumbnailUrl?: string;\n    };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n    fullWidthMedia?: boolean;\n    className?: string;\n    mediaClassName?: string;\n}\n\nexport type Coordinate = [number, number];\n\nexport interface MapBaseProps {\n    zoom?: number;\n    className?: string;\n    forceAspectRatio?: boolean;\n}\n\nexport interface GMapProps extends MapBaseProps {\n    address: string;\n}\n\nexport type YMapMargin =\n    | number\n    | [vertical: number, horizontal: number]\n    | [top: number, right: number, bottom: number, left: number];\n\nexport interface YMapCopyrightPosition {\n    top?: number;\n    right?: number;\n    bottom?: number;\n    left?: number;\n}\n\nexport interface YMapProps extends MapBaseProps {\n    markers: YMapMarker[];\n    disableControls?: boolean;\n    disableBalloons?: boolean;\n    areaMargin?: YMapMargin;\n    copyrightPosition?: YMapCopyrightPosition;\n    id: string;\n}\n\nexport interface YMapMarker {\n    address?: string;\n    coordinate?: Coordinate;\n    label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n    iconCaption?: string;\n    iconContent?: string;\n    iconColor?: string;\n    iconImageHref?: string;\n    iconImageSize?: [number, number];\n    iconImageOffset?: [number, number];\n    iconImageClipRect?: [[number, number], [number, number]];\n    iconLayout?: 'default#image';\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    iconShape?: Record<string, any>;\n    preset?: string;\n}\n\nexport interface YMapMarkerPrivate extends YMapMarker {\n    label?: YMapMarkerLabelPrivate;\n}\n\nexport interface YMapMarkerLabelPrivate extends YMapMarkerLabel {\n    cursor?: string;\n    interactivityModel?: string;\n}\n\nexport type MapProps = GMapProps | YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n    id: string;\n    theme: 'dark' | 'light';\n}\n\nexport interface IframeProps {\n    src: string;\n    width?: number;\n    height?: number;\n    title?: string;\n    name?: string;\n}\n\nexport type DataLensProps = string | DataLensObjectProps;\n\nexport interface AuthorItem {\n    firstName: string;\n    secondName: string;\n    description?: string;\n    avatar?: ThemeSupporting<ImageProps> | JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps {\n    items: {\n        url: string;\n        text: React.ReactNode;\n    }[];\n    theme?: TextTheme;\n    analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps, AnalyticsEventsBase {\n    navTitle?: string;\n    anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n    text: string;\n    textSize?: TextSize;\n    url?: string;\n    urlTitle?: string;\n    custom?: string | React.ReactNode;\n    onClick?: () => void;\n}\n\nexport type MediaView = 'fit' | 'full';\n\n// card\nexport type MediaBorder = 'shadow' | 'line' | 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' | 'footer';\n\nexport interface CardBaseProps {\n    border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n    controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n    title: string;\n    detailedTitle?: string;\n    description: string;\n    label?: {\n        color: PriceLabelColor;\n        text?: string;\n        size?: TextSize;\n    };\n}\n\nexport interface PriceDetailsSettingsProps {\n    title: string;\n    description: string;\n}\n\nexport interface PriceDetailsListProps {\n    text: string;\n}\n\nexport interface PriceDetailsProps {\n    items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n    extends PriceDetailsProps,\n        PriceDescriptionProps,\n        AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n    title: string;\n    size?: TextSize;\n    titleColor?: PriceDescriptionColor;\n}\n\n/** @deprecated */\nexport interface PriceDetailedProps extends CardBaseProps {\n    items: PriceItemProps[];\n    description?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n        titleColor?: PriceDescriptionColor;\n    };\n    details?: {\n        titleSize?: TextSize;\n        descriptionSize?: TextSize;\n    };\n    priceType?: PriceDetailsType;\n    numberGroupItems?: 3 | 4 | 5;\n    isCombined?: boolean;\n    useMixedView?: boolean;\n    foldable?: PriceFoldableDetailsProps;\n    labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n    author: AuthorItem;\n    className?: string;\n    authorContainerClassName?: string;\n    type?: AuthorType;\n    theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n    title?: TitleItemProps | string;\n    subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n    id: number | string;\n    containerId?: string;\n    theme?: string;\n    className?: string;\n    headerHeight?: number;\n    customFormOrigin?: string;\n    customFormSection?: string;\n    params?: {[key: string]: string};\n\n    onSubmit?: () => void;\n    onLoad?: () => void;\n}\n\nexport interface WithBorder {\n    border?: MediaBorder;\n    /**\n     * @deprecated use custom class for media-component\n     */\n    disableShadow?: boolean;\n}\n"]}

package/build/cjs/text-transform/config.d.ts

@@ -13,6 +13,7 @@ export declare const blockHeaderTransformer: ({
         urlTitle?: string;
         custom?: string | React.ReactNode;
         onClick?: () => void;
+        analyticsEvents?: import("../models/index.js").AnalyticsEventsProp;
     };
     renderInline: boolean;
 } | {

package/build/esm/components/Title/TitleItem.d.ts

@@ -1,7 +1,7 @@
-import { QAProps, TextSize, TitleItemProps } from "../../models/index.js";
+import { AnalyticsEventsBase, QAProps, TextSize, TitleItemProps } from "../../models/index.js";
 import './TitleItem.css';
 export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24 | 13 | 22 | 26 | 38;
-export interface TitleItemFullProps extends TitleItemProps, QAProps {
+export interface TitleItemFullProps extends TitleItemProps, QAProps, AnalyticsEventsBase {
     className?: string;
     onClick?: () => void;
     resetMargin?: boolean;

package/build/esm/components/Title/TitleItem.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ToggleArrow, YFMWrapper } from "../index.js";
 import { LocationContext } from "../../context/locationContext/index.js";
 import { MobileContext } from "../../context/mobileContext/index.js";
+import { useAnalytics } from "../../hooks/index.js";
 import { block, getHeaderTag, getLinkProps } from "../../utils/index.js";
 import Anchor from "../Anchor/Anchor.js";
 import './TitleItem.css';
@@ -24,21 +25,30 @@ export function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = React.useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, analyticsEvents, } = props;
+    const handleAnalytics = useAnalytics();
     const { hostname } = React.useContext(LocationContext);
     const textMarkup = (_jsxs(React.Fragment, { children: [_jsx(YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
                     constructor: true,
                 } }), custom && (_jsxs(React.Fragment, { children: ["\u00A0", _jsx("span", { className: b('custom'), children: custom })] }))] }));
     let content;
     const insideClickableContent = (_jsxs("span", { className: b('wrapper'), children: [textMarkup, "\u00A0", _jsx(ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })] }));
+    const handleClick = () => {
+        if (analyticsEvents) {
+            handleAnalytics(analyticsEvents);
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
     if (!url && !onClick) {
         content = textMarkup;
     }
     else if (url) {
-        content = (_jsx("a", { className: b('link'), href: url, ...getLinkProps(url, hostname), onClick: onClick, title: urlTitle, children: insideClickableContent }));
+        content = (_jsx("a", { className: b('link'), href: url, ...getLinkProps(url, hostname), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
     }
     else if (onClick) {
-        content = (_jsx("button", { className: b('link'), onClick: onClick, title: urlTitle, children: insideClickableContent }));
+        content = (_jsx("button", { className: b('link'), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
     }
     return (_jsxs(React.Fragment, { children: [anchor && _jsx(Anchor, { id: anchor, className: b('anchor') }), React.createElement(getHeaderTag(textSize), {
                 className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),

package/build/esm/components/Title/TitleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n    } = props;\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <YFMWrapper\n                className={b('text')}\n                contentClassName={b('text')}\n                content={text}\n                modifiers={{\n                    constructor: true,\n                }}\n            />\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={onClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={onClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}
+{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,oBAAY;AAC5C,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAC9D,OAAO,EAAC,aAAa,EAAC,6CAAoC;AAC1D,OAAO,EAAC,YAAY,EAAC,6BAAoB;AAEzC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAC,6BAAoB;AAC9D,OAAO,MAAM,4BAAyB;AAEtC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,UAAU,YAAY,CAAC,IAAc,EAAE,QAAiB;IAC1D,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,IAAI;YACL,OAAO,EAAE,CAAC;QACd,KAAK,GAAG;YACJ,OAAO,EAAE,CAAC;QACd,KAAK,IAAI,CAAC;QACV,KAAK,GAAG;YACJ,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9B,KAAK,GAAG;YACJ,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9B;YACI,OAAO,EAAE,CAAC;IAClB,CAAC;AACL,CAAC;AAQD,MAAM,SAAS,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC5C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,EACF,QAAQ,GAAG,GAAG,EACd,IAAI,EACJ,MAAM,EACN,OAAO,EACP,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,EAAE,EACF,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,eAAe,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,YAAY,EAAE,CAAC;IAEvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,UAAU,GAAG,CACf,MAAC,KAAK,CAAC,QAAQ,eACX,KAAC,UAAU,IACP,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,IAAI,EACb,SAAS,EAAE;oBACP,WAAW,EAAE,IAAI;iBACpB,GACH,EACD,MAAM,IAAI,CACP,MAAC,KAAK,CAAC,QAAQ,yBAEX,eAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAG,MAAM,GAAQ,IAChC,CACpB,IACY,CACpB,CAAC;IACF,IAAI,OAAwB,CAAC;IAE7B,MAAM,sBAAsB,GAAG,CAC3B,gBAAM,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,UAAU,YAEX,KAAC,WAAW,IACR,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,EACvC,IAAI,EAAE,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,EACtC,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,IAAI,EAAE,KAAK,GACb,IACC,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,eAAe,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;QACd,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,OAAO,GAAG,UAAU,CAAC;IACzB,CAAC;SAAM,IAAI,GAAG,EAAE,CAAC;QACb,OAAO,GAAG,CACN,YACI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,IAAI,EAAE,GAAG,KACL,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,EAC/B,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,QAAQ,YAEd,sBAAsB,GACvB,CACP,CAAC;IACN,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACjB,OAAO,GAAG,CACN,iBAAQ,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,YAC9D,sBAAsB,GAClB,CACZ,CAAC;IACN,CAAC;IAED,OAAO,CACH,MAAC,KAAK,CAAC,QAAQ,eACV,MAAM,IAAI,KAAC,MAAM,IAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAI,EACxD,KAAK,CAAC,aAAa,CAChB,YAAY,CAAC,QAAQ,CAAC,EACtB;gBACI,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAC,EAAE,SAAS,CAAC;gBAC/E,SAAS,EAAE,GAAG,EAAE,SAAS;aAC5B,EACD,OAAO,CACV,IACY,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {AnalyticsEventsBase, QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps, AnalyticsEventsBase {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n        analyticsEvents,\n    } = props;\n\n    const handleAnalytics = useAnalytics();\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <YFMWrapper\n                className={b('text')}\n                contentClassName={b('text')}\n                content={text}\n                modifiers={{\n                    constructor: true,\n                }}\n            />\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    const handleClick = () => {\n        if (analyticsEvents) {\n            handleAnalytics(analyticsEvents);\n        }\n\n        if (onClick) {\n            onClick();\n        }\n    };\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={handleClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={handleClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}

package/build/esm/demo/ComponentsControls.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/esm/demo/ComponentsControls.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import BackLink from "../components/BackLink/BackLink.js";
+import Button from "../components/Button/Button.js";
+import Control from "../components/Control/Control.js";
+import FileLink from "../components/FileLink/FileLink.js";
+import HeaderBreadcrumbs from "../components/HeaderBreadcrumbs/HeaderBreadcrumbs.js";
+import Link from "../components/Link/Link.js";
+import ToggleArrow from "../components/ToggleArrow/ToggleArrow.js";
+import backLinkData from "../components/BackLink/__stories__/data.json";
+import buttonData from "../components/Button/__stories__/data.json";
+import controlData from "../components/Control/__stories__/data.json";
+import fileLinkData from "../components/FileLink/__stories__/data.json";
+import headerBreadcrumbsData from "../components/HeaderBreadcrumbs/__stories__/data.json";
+import linkData from "../components/Link/__stories__/data.json";
+import toggleArrowData from "../components/ToggleArrow/__stories__/data.json";
+export default { title: 'Lab/Tokenization/Components/Controls' };
+const LINK_THEMES = ['normal', 'underline', 'back', 'file-link'];
+const CONTROL_THEMES = ['primary', 'secondary', 'link', 'accent'];
+const CONTROL_SIZES = ['xs', 's', 'm', 'l'];
+const FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];
+export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Button \u2014 default" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(Button, { ...buttonData.default }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Button \u2014 width (max / auto)" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: buttonData.width.map((item, index) => (_jsx(Button, { ...item }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Link \u2014 themes" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap' }, children: LINK_THEMES.map((theme) => (_jsx(Link, { text: `${theme}`, url: "#", theme: theme }, theme))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Link \u2014 with arrow (s / m / l)" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: linkData.normalArrows.map((item, index) => (_jsx(Link, { ...item }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "BackLink" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(BackLink, { ...backLinkData.default.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 default" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(FileLink, { ...fileLinkData.default.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 horizontal / vertical" }), _jsxs("div", { style: { marginTop: '8px', display: 'flex', gap: '24px' }, children: [_jsx(FileLink, { ...fileLinkData.typesThemes.content, type: "horizontal" }), _jsx(FileLink, { ...fileLinkData.typesThemes.content, type: "vertical" })] })] }), _jsxs("section", { children: [_jsx("strong", { children: "FileLink \u2014 extensions" }), _jsx("div", { style: { marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap' }, children: FILE_EXTENSIONS.map((href) => (_jsx(FileLink, { href: href, text: "Link to file" }, href))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Control \u2014 themes \u00D7 sizes" }), _jsxs("div", { style: {
+                        marginTop: '8px',
+                        display: 'grid',
+                        gridTemplateColumns: 'auto repeat(4, 40px)',
+                        gap: '8px',
+                        alignItems: 'center',
+                    }, children: [_jsx("span", {}), CONTROL_SIZES.map((size) => (_jsx("span", { style: { fontSize: '12px', textAlign: 'center' }, children: size }, size))), CONTROL_THEMES.map((theme) => (_jsxs(React.Fragment, { children: [_jsx("span", { style: { fontSize: '12px' }, children: theme }), CONTROL_SIZES.map((size) => (_jsx(Control, { ...controlData.sizesThemes.content, theme: theme, size: size }, `${theme}-${size}`)))] }, theme)))] })] }), _jsxs("section", { children: [_jsx("strong", { children: "ToggleArrow \u2014 closed / open" }), _jsxs("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center' }, children: [_jsx(ToggleArrow, { ...toggleArrowData.vertical.content }), _jsx(ToggleArrow, { ...toggleArrowData.vertical.content, open: true }), _jsx(ToggleArrow, { ...toggleArrowData.horizontal.content }), _jsx(ToggleArrow, { ...toggleArrowData.horizontal.content, open: true })] })] }), _jsxs("section", { children: [_jsx("strong", { children: "HeaderBreadcrumbs" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(HeaderBreadcrumbs, { ...headerBreadcrumbsData.default.content }) })] })] }));
+//# sourceMappingURL=ComponentsControls.stories.js.map

package/build/esm/demo/ComponentsControls.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsControls.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsControls.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Meta, StoryFn} from '@storybook/react';\n\nimport BackLink, {BackLinkProps} from '../components/BackLink/BackLink';\nimport Button, {ButtonProps} from '../components/Button/Button';\nimport Control, {ControlProps} from '../components/Control/Control';\nimport FileLink from '../components/FileLink/FileLink';\nimport HeaderBreadcrumbs from '../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport Link, {LinkFullProps} from '../components/Link/Link';\nimport ToggleArrow, {ToggleArrowProps} from '../components/ToggleArrow/ToggleArrow';\nimport {FileLinkProps, HeaderBreadCrumbsProps} from '../models';\n\nimport backLinkData from '../components/BackLink/__stories__/data.json';\nimport buttonData from '../components/Button/__stories__/data.json';\nimport controlData from '../components/Control/__stories__/data.json';\nimport fileLinkData from '../components/FileLink/__stories__/data.json';\nimport headerBreadcrumbsData from '../components/HeaderBreadcrumbs/__stories__/data.json';\nimport linkData from '../components/Link/__stories__/data.json';\nimport toggleArrowData from '../components/ToggleArrow/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Controls'} as Meta;\n\nconst LINK_THEMES: LinkFullProps['theme'][] = ['normal', 'underline', 'back', 'file-link'];\nconst CONTROL_THEMES: ControlProps['theme'][] = ['primary', 'secondary', 'link', 'accent'];\nconst CONTROL_SIZES: ControlProps['size'][] = ['xs', 's', 'm', 'l'];\nconst FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>Button — default</strong>\n            <div style={{marginTop: '8px'}}>\n                <Button {...buttonData.default} />\n            </div>\n        </section>\n        <section>\n            <strong>Button — width (max / auto)</strong>\n            <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n                {(buttonData.width as ButtonProps[]).map((item, index) => (\n                    <Button key={index} {...item} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Link — themes</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap'}}>\n                {LINK_THEMES.map((theme) => (\n                    <Link key={theme} text={`${theme}`} url=\"#\" theme={theme} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Link — with arrow (s / m / l)</strong>\n            <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n                {(linkData.normalArrows as LinkFullProps[]).map((item, index) => (\n                    <Link key={index} {...item} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>BackLink</strong>\n            <div style={{marginTop: '8px'}}>\n                <BackLink {...(backLinkData.default.content as BackLinkProps)} />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — default</strong>\n            <div style={{marginTop: '8px'}}>\n                <FileLink {...fileLinkData.default.content} />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — horizontal / vertical</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px'}}>\n                <FileLink\n                    {...(fileLinkData.typesThemes.content as FileLinkProps)}\n                    type=\"horizontal\"\n                />\n                <FileLink\n                    {...(fileLinkData.typesThemes.content as FileLinkProps)}\n                    type=\"vertical\"\n                />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — extensions</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n                {FILE_EXTENSIONS.map((href) => (\n                    <FileLink key={href} href={href} text=\"Link to file\" />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Control — themes × sizes</strong>\n            <div\n                style={{\n                    marginTop: '8px',\n                    display: 'grid',\n                    gridTemplateColumns: 'auto repeat(4, 40px)',\n                    gap: '8px',\n                    alignItems: 'center',\n                }}\n            >\n                <span />\n                {CONTROL_SIZES.map((size) => (\n                    <span key={size} style={{fontSize: '12px', textAlign: 'center'}}>\n                        {size}\n                    </span>\n                ))}\n                {CONTROL_THEMES.map((theme) => (\n                    <React.Fragment key={theme}>\n                        <span style={{fontSize: '12px'}}>{theme}</span>\n                        {CONTROL_SIZES.map((size) => (\n                            <Control\n                                key={`${theme}-${size}`}\n                                {...(controlData.sizesThemes.content as ControlProps)}\n                                theme={theme}\n                                size={size}\n                            />\n                        ))}\n                    </React.Fragment>\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>ToggleArrow — closed / open</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center'}}>\n                <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} />\n                <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} open />\n                <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} />\n                <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} open />\n            </div>\n        </section>\n        <section>\n            <strong>HeaderBreadcrumbs</strong>\n            <div style={{marginTop: '8px'}}>\n                <HeaderBreadcrumbs\n                    {...(headerBreadcrumbsData.default.content as HeaderBreadCrumbsProps)}\n                />\n            </div>\n        </section>\n    </div>\n);\n"]}

package/build/esm/demo/ComponentsLayout.stories.css

@@ -0,0 +1,13 @@
+.demo-balanced-masonry {
+  display: flex;
+}
+
+.demo-balanced-masonry-column {
+  margin: 5px;
+}
+
+.demo-balanced-masonry-card {
+  min-height: auto;
+  height: auto;
+  margin-bottom: 10px;
+}

package/build/esm/demo/ComponentsLayout.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import './ComponentsLayout.stories.css';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/esm/demo/ComponentsLayout.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BalancedMasonry from "../components/BalancedMasonry/BalancedMasonry.js";
+import CardBase from "../components/CardBase/CardBase.js";
+import ErrorWrapper from "../components/ErrorWrapper/ErrorWrapper.js";
+import FullWidthBackground from "../components/FullWidthBackground/FullWidthBackground.js";
+import Table from "../components/Table/Table.js";
+import UnpublishedLabel from "../components/UnpublishedLabel/UnpublishedLabel.js";
+import { BREAKPOINTS } from "../constants.js";
+import balancedMasonryData from "../components/BalancedMasonry/__stories__/data.json";
+import errorWrapperData from "../components/ErrorWrapper/__stories__/data.json";
+import fullWidthBackgroundData from "../components/FullWidthBackground/__stories__/data.json";
+import tableData from "../components/Table/__stories__/data.json";
+import unpublishedLabelData from "../components/UnpublishedLabel/__stories__/data.json";
+import './ComponentsLayout.stories.css';
+const masonryBreakpointCols = {
+    [BREAKPOINTS.xs]: 1,
+    [BREAKPOINTS.sm]: 2,
+    [BREAKPOINTS.md]: 2,
+    [BREAKPOINTS.lg]: 3,
+    [BREAKPOINTS.xl]: 3,
+};
+export default { title: 'Lab/Tokenization/Components/Layout' };
+export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "FullWidthBackground \u2014 default" }), _jsx("div", { style: { marginTop: '8px', height: '100px' }, children: _jsx(FullWidthBackground, { ...fullWidthBackgroundData.default, children: _jsx("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "FullWidthBackground \u2014 rounded" }), _jsx("div", { style: { marginTop: '8px', height: '100px' }, children: _jsx(FullWidthBackground, { ...fullWidthBackgroundData.rounded, children: _jsx("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "BalancedMasonry" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(BalancedMasonry, { className: "demo-balanced-masonry", columnClassName: "demo-balanced-masonry-column", breakpointCols: masonryBreakpointCols, children: balancedMasonryData.default.content.children.map((text, index) => (_jsx(CardBase, { className: "demo-balanced-masonry-card", children: _jsx(CardBase.Content, { children: text }) }, index))) }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Table \u2014 default" }), _jsx(Table, { ...tableData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Table \u2014 tick markers" }), _jsx(Table, { ...tableData.tick.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "UnpublishedLabel (label)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(UnpublishedLabel, { ...unpublishedLabelData.label.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "UnpublishedLabel (line)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(UnpublishedLabel, { ...unpublishedLabelData.line.content }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ErrorWrapper (error state)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(ErrorWrapper, { ...errorWrapperData.default.content, handler: () => { }, children: errorWrapperData.default.content.children }) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ErrorWrapper (no error)" }), _jsx("div", { style: { marginTop: '8px' }, children: _jsx(ErrorWrapper, { ...errorWrapperData.noError.content, handler: () => { }, children: errorWrapperData.noError.content.children }) })] })] }));
+//# sourceMappingURL=ComponentsLayout.stories.js.map

package/build/esm/demo/ComponentsLayout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsLayout.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport BalancedMasonry, {BalancedMasonryProps} from '../components/BalancedMasonry/BalancedMasonry';\nimport CardBase from '../components/CardBase/CardBase';\nimport ErrorWrapper from '../components/ErrorWrapper/ErrorWrapper';\nimport FullWidthBackground, {\n    FullWidthBackgroundProps,\n} from '../components/FullWidthBackground/FullWidthBackground';\nimport Table from '../components/Table/Table';\nimport UnpublishedLabel, {\n    UnpublishedLabelProps,\n} from '../components/UnpublishedLabel/UnpublishedLabel';\nimport {BREAKPOINTS} from '../constants';\nimport {TableProps} from '../models';\n\nimport balancedMasonryData from '../components/BalancedMasonry/__stories__/data.json';\nimport errorWrapperData from '../components/ErrorWrapper/__stories__/data.json';\nimport fullWidthBackgroundData from '../components/FullWidthBackground/__stories__/data.json';\nimport tableData from '../components/Table/__stories__/data.json';\nimport unpublishedLabelData from '../components/UnpublishedLabel/__stories__/data.json';\n\nimport './ComponentsLayout.stories.scss';\n\nconst masonryBreakpointCols: BalancedMasonryProps['breakpointCols'] = {\n    [BREAKPOINTS.xs]: 1,\n    [BREAKPOINTS.sm]: 2,\n    [BREAKPOINTS.md]: 2,\n    [BREAKPOINTS.lg]: 3,\n    [BREAKPOINTS.xl]: 3,\n};\n\nexport default {title: 'Lab/Tokenization/Components/Layout'} as Meta;\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>FullWidthBackground — default</strong>\n            <div style={{marginTop: '8px', height: '100px'}}>\n                <FullWidthBackground\n                    {...(fullWidthBackgroundData.default as FullWidthBackgroundProps)}\n                >\n                    <div style={{padding: '40px', color: 'white'}}>Content</div>\n                </FullWidthBackground>\n            </div>\n        </section>\n        <section>\n            <strong>FullWidthBackground — rounded</strong>\n            <div style={{marginTop: '8px', height: '100px'}}>\n                <FullWidthBackground\n                    {...(fullWidthBackgroundData.rounded as FullWidthBackgroundProps)}\n                >\n                    <div style={{padding: '40px', color: 'white'}}>Content</div>\n                </FullWidthBackground>\n            </div>\n        </section>\n        <section>\n            <strong>BalancedMasonry</strong>\n            <div style={{marginTop: '8px'}}>\n                <BalancedMasonry\n                    className=\"demo-balanced-masonry\"\n                    columnClassName=\"demo-balanced-masonry-column\"\n                    breakpointCols={masonryBreakpointCols}\n                >\n                    {balancedMasonryData.default.content.children.map((text, index) => (\n                        <CardBase key={index} className=\"demo-balanced-masonry-card\">\n                            <CardBase.Content>{text}</CardBase.Content>\n                        </CardBase>\n                    ))}\n                </BalancedMasonry>\n            </div>\n        </section>\n        <section>\n            <strong>Table — default</strong>\n            <Table {...(tableData.default.content as TableProps)} />\n        </section>\n        <section>\n            <strong>Table — tick markers</strong>\n            <Table {...(tableData.tick.content as TableProps)} />\n        </section>\n        <section>\n            <strong>UnpublishedLabel (label)</strong>\n            <div style={{marginTop: '8px'}}>\n                <UnpublishedLabel\n                    {...(unpublishedLabelData.label.content as UnpublishedLabelProps)}\n                />\n            </div>\n        </section>\n        <section>\n            <strong>UnpublishedLabel (line)</strong>\n            <div style={{marginTop: '8px'}}>\n                <UnpublishedLabel\n                    {...(unpublishedLabelData.line.content as UnpublishedLabelProps)}\n                />\n            </div>\n        </section>\n        <section>\n            <strong>ErrorWrapper (error state)</strong>\n            <div style={{marginTop: '8px'}}>\n                <ErrorWrapper {...errorWrapperData.default.content} handler={() => {}}>\n                    {errorWrapperData.default.content.children}\n                </ErrorWrapper>\n            </div>\n        </section>\n        <section>\n            <strong>ErrorWrapper (no error)</strong>\n            <div style={{marginTop: '8px'}}>\n                <ErrorWrapper {...errorWrapperData.noError.content} handler={() => {}}>\n                    {errorWrapperData.noError.content.children}\n                </ErrorWrapper>\n            </div>\n        </section>\n    </div>\n);\n"]}

package/build/esm/demo/ComponentsText.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/esm/demo/ComponentsText.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { blockTransform, yfmTransform } from "../../.storybook/utils.js";
+import Author from "../components/Author/Author.js";
+import ContentList from "../components/ContentList/ContentList.js";
+import MetaInfo from "../components/MetaInfo/MetaInfo.js";
+import Title from "../components/Title/Title.js";
+import YFMWrapper from "../components/YFMWrapper/YFMWrapper.js";
+import { AuthorType } from "../models/index.js";
+import authorData from "../components/Author/__stories__/data.json";
+import contentListData from "../components/ContentList/__stories__/data.json";
+import metaInfoData from "../components/MetaInfo/__stories__/data.json";
+import titleData from "../components/Title/__stories__/data.json";
+import yfmWrapperData from "../components/YFMWrapper/__stories__/data.json";
+export default { title: 'Lab/Tokenization/Components/Text' };
+const defaultTitleArgs = {
+    ...titleData.default.content,
+    subtitle: yfmTransform(titleData.default.content.subtitle),
+};
+const transformContentList = (item) => blockTransform(item);
+export const Default = () => (_jsxs("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [_jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 default" }), _jsx(Title, { ...defaultTitleArgs })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), _jsx("div", { children: Object.entries(titleData.sizes).map(([size, props]) => (_jsx("div", { style: { paddingBottom: '32px' }, children: _jsx(Title, { ...defaultTitleArgs, title: props }) }, size))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "Title \u2014 with link" }), _jsx(Title, { ...defaultTitleArgs, title: titleData.titleLink.content.title })] }), _jsxs("section", { children: [_jsx("strong", { children: "YFMWrapper" }), _jsx(YFMWrapper, { ...yfmWrapperData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 column" }), _jsx(Author, { ...authorData.default.content })] }), _jsxs("section", { children: [_jsx("strong", { children: "Author \u2014 line" }), _jsx(Author, { ...authorData.default.content, type: AuthorType.Line })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 default" }), _jsx(ContentList, { ...transformContentList(contentListData.default) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 without icon" }), _jsx(ContentList, { ...transformContentList(contentListData.withoutIcon) })] }), _jsxs("section", { children: [_jsx("strong", { children: "ContentList \u2014 sizes (s / m / l)" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: contentListData.sizes.map((item, index) => (_jsx(ContentList, { ...transformContentList(item) }, index))) })] }), _jsxs("section", { children: [_jsx("strong", { children: "MetaInfo" }), _jsx(MetaInfo, { ...metaInfoData.default.content })] })] }));
+//# sourceMappingURL=ComponentsText.stories.js.map

package/build/esm/demo/ComponentsText.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,kCAA+B;AACpE,OAAO,MAAM,uCAAoC;AACjD,OAAO,WAAW,iDAA8C;AAChE,OAAO,QAAQ,2CAAwC;AACvD,OAAO,KAAK,qCAAkC;AAC9C,OAAO,UAAU,+CAA4C;AAC7D,OAAO,EAAC,UAAU,EAAgD,2BAAkB;AAEpF,OAAO,UAAU,mDAAmD;AACpE,OAAO,eAAe,wDAAwD;AAC9E,OAAO,YAAY,qDAAqD;AACxE,OAAO,SAAS,kDAAkD;AAClE,OAAO,cAAc,uDAAuD;AAE5E,eAAe,EAAC,KAAK,EAAE,kCAAkC,EAAS,CAAC;AAEnE,MAAM,gBAAgB,GAAG;IACrB,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO;IAC5B,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;CAC7D,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC3C,cAAc,CAAC,IAA8B,CAAqB,CAAC;AAEvE,MAAM,CAAC,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,aAChF,8BACI,oDAAgC,EAChC,KAAC,KAAK,OAAK,gBAAgB,GAAI,IACzB,EACV,8BACI,gEAAuC,EACvC,wBACK,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACpD,cAAgB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,YAC1C,KAAC,KAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,KAAuB,GAAI,IADzD,IAAI,CAER,CACT,CAAC,GACA,IACA,EACV,8BACI,sDAAkC,EAClC,KAAC,KAAK,OACE,gBAAgB,EACpB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAuB,GAC5D,IACI,EACV,8BACI,0CAA2B,EAC3B,KAAC,UAAU,OAAK,cAAc,CAAC,OAAO,CAAC,OAAO,GAAI,IAC5C,EACV,8BACI,oDAAgC,EAChC,KAAC,MAAM,OAAK,UAAU,CAAC,OAAO,CAAC,OAAO,GAAI,IACpC,EACV,8BACI,kDAA8B,EAC9B,KAAC,MAAM,OAAK,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,GAAI,IAC3D,EACV,8BACI,0DAAsC,EACtC,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,GAAI,IAC5D,EACV,8BACI,+DAA2C,EAC3C,KAAC,WAAW,OAAK,oBAAoB,CAAC,eAAe,CAAC,WAAW,CAAC,GAAI,IAChE,EACV,8BACI,oEAAgD,EAChD,cAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,YAC9D,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,KAAC,WAAW,OAAiB,oBAAoB,CAAC,IAAI,CAAC,IAArC,KAAK,CAAoC,CAC9D,CAAC,GACA,IACA,EACV,8BACI,wCAAyB,EACzB,KAAC,QAAQ,OAAK,YAAY,CAAC,OAAO,CAAC,OAAO,GAAI,IACxC,IACR,CACT,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform, yfmTransform} from '../../.storybook/utils';\nimport Author from '../components/Author/Author';\nimport ContentList from '../components/ContentList/ContentList';\nimport MetaInfo from '../components/MetaInfo/MetaInfo';\nimport Title from '../components/Title/Title';\nimport YFMWrapper from '../components/YFMWrapper/YFMWrapper';\nimport {AuthorType, ContentListProps, CustomBlock, TitleItemProps} from '../models';\n\nimport authorData from '../components/Author/__stories__/data.json';\nimport contentListData from '../components/ContentList/__stories__/data.json';\nimport metaInfoData from '../components/MetaInfo/__stories__/data.json';\nimport titleData from '../components/Title/__stories__/data.json';\nimport yfmWrapperData from '../components/YFMWrapper/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Text'} as Meta;\n\nconst defaultTitleArgs = {\n    ...titleData.default.content,\n    subtitle: yfmTransform(titleData.default.content.subtitle),\n};\n\nconst transformContentList = (item: unknown) =>\n    blockTransform(item as unknown as CustomBlock) as ContentListProps;\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>Title — default</strong>\n            <Title {...defaultTitleArgs} />\n        </section>\n        <section>\n            <strong>Title — sizes (l → xs)</strong>\n            <div>\n                {Object.entries(titleData.sizes).map(([size, props]) => (\n                    <div key={size} style={{paddingBottom: '32px'}}>\n                        <Title {...defaultTitleArgs} title={props as TitleItemProps} />\n                    </div>\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Title — with link</strong>\n            <Title\n                {...defaultTitleArgs}\n                title={titleData.titleLink.content.title as TitleItemProps}\n            />\n        </section>\n        <section>\n            <strong>YFMWrapper</strong>\n            <YFMWrapper {...yfmWrapperData.default.content} />\n        </section>\n        <section>\n            <strong>Author — column</strong>\n            <Author {...authorData.default.content} />\n        </section>\n        <section>\n            <strong>Author — line</strong>\n            <Author {...authorData.default.content} type={AuthorType.Line} />\n        </section>\n        <section>\n            <strong>ContentList — default</strong>\n            <ContentList {...transformContentList(contentListData.default)} />\n        </section>\n        <section>\n            <strong>ContentList — without icon</strong>\n            <ContentList {...transformContentList(contentListData.withoutIcon)} />\n        </section>\n        <section>\n            <strong>ContentList — sizes (s / m / l)</strong>\n            <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>\n                {contentListData.sizes.map((item, index) => (\n                    <ContentList key={index} {...transformContentList(item)} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>MetaInfo</strong>\n            <MetaInfo {...metaInfoData.default.content} />\n        </section>\n    </div>\n);\n"]}

package/build/esm/demo/ContentAndData.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { CustomConfig, NavigationData } from "../models/index.js";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    navigation: NavigationData;
+    custom?: CustomConfig;
+}>;