@gravity-ui/page-constructor 6.0.1-beta.0 → 7.0.0-beta.1

package/build/cjs/components/ContentList/ContentList.css

@@ -1,34 +1,38 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-content-list_size_l {
+.pc-content-list_size_l, .pc-content-list_size_m {
   max-width: 480px;
 }
-.pc-content-list_size_l .pc-content-list__title {
+.pc-content-list_size_l .pc-content-list__title, .pc-content-list_size_m .pc-content-list__title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   margin: 0 0 8px;
 }
-.pc-content-list_size_l .pc-content-list__icon {
+.pc-content-list_size_l .pc-content-list__icon, .pc-content-list_size_m .pc-content-list__icon {
   width: 22px;
   height: 22px;
   margin-top: 1px;
   margin-bottom: 1px;
   margin-right: 12px;
 }
-.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
+.pc-content-list_size_l .pc-content-list__item:not(:last-child), .pc-content-list_size_m .pc-content-list__item:not(:last-child) {
   margin-bottom: 16px;
 }
-.pc-content-list_size_l .pc-content-list__item_without-title:not(:last-child) {
+.pc-content-list_size_l .pc-content-list__item_without-title:not(:last-child), .pc-content-list_size_m .pc-content-list__item_without-title:not(:last-child) {
   margin-bottom: 12px;
 }
-.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon {
+.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon, .pc-content-list_size_m .pc-content-list__item_without-title .pc-content-list__icon {
   width: 20px;
   height: 20px;
   margin-top: 2px;
   margin-bottom: 2px;
   margin-right: 8px;
 }
-.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__text {
+.pc-content-list_size_l .pc-content-list__text, .pc-content-list_size_m .pc-content-list__text {
+  font-size: var(--g-text-subheader-2-font-size);
+  line-height: var(--g-text-subheader-2-line-height);
+}
+.pc-content-list_size_l .pc-content-list__text_without-title, .pc-content-list_size_m .pc-content-list__text_without-title {
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
 }
@@ -47,10 +51,6 @@ unpredictable css rules order in build */
   margin-bottom: 2px;
   margin-right: 8px;
 }
-.pc-content-list_size_s .pc-content-list__text {
-  font-size: var(--g-text-body-1-font-size);
-  line-height: var(--g-text-body-1-line-height);
-}
 .pc-content-list_size_s .pc-content-list__item:not(:last-child) {
   margin-bottom: 12px;
 }
@@ -63,7 +63,11 @@ unpredictable css rules order in build */
   margin-top: 1px;
   margin-bottom: 1px;
 }
-.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__text {
+.pc-content-list_size_s .pc-content-list__text {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.pc-content-list_size_s .pc-content-list__text_without-title {
   font-size: var(--g-text-subheader-2-font-size);
   line-height: var(--g-text-subheader-2-line-height);
 }

package/build/cjs/components/ContentList/ContentList.js

@@ -23,7 +23,7 @@ const ContentList = ({ list, size = 'l', qa, theme }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: b({ size, theme }), "data-qa": qa, children: list === null || list === void 0 ? void 0 : list.map((item) => {
             const { icon, title, text } = item;
             return ((0, jsx_runtime_1.jsxs)("div", { className: b('item', { 'without-title': !title }), children: [(0, jsx_runtime_1.jsx)(ContentListItemIcon_1.default, { icon: icon, className: b('icon'), qa: qaAttributes.image }), (0, jsx_runtime_1.jsxs)("div", { children: [title &&
-                                React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: title, modifiers: { constructor: true } })), text && ((0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text }))] })] }, (0, uuid_1.v4)()));
+                                React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: title, modifiers: { constructor: true } })), text && ((0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { contentClassName: b('text', { 'without-title': !title }), content: text, modifiers: { constructor: true }, qa: qaAttributes.text }))] })] }, (0, uuid_1.v4)()));
         }) }));
 };
 exports.default = ContentList;

package/build/cjs/components/ContentList/ContentList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,+BAAkC;AAIlC,gDAAkC;AAClC,kDAAmD;AACnD,qFAAkD;AAElD,2FAA6C;AAI7C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC;YACjC,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,uBAAC,6BAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,EACtE,4CACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,uBAAC,oBAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,uBAAC,oBAAU,IACP,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAjBiD,IAAA,SAAM,GAAE,CAkB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport ItemIcon from './ContentListItemIcon';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ItemIcon icon={icon} className={b('icon')} qa={qaAttributes.image} />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    className={b('text')}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}
+{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,+BAAkC;AAIlC,gDAAkC;AAClC,kDAAmD;AACnD,qFAAkD;AAElD,2FAA6C;AAI7C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC;YACjC,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,uBAAC,6BAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,EACtE,4CACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,uBAAC,oBAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,uBAAC,oBAAU,IACP,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,EACtD,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAjBiD,IAAA,SAAM,GAAE,CAkB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport ItemIcon from './ContentListItemIcon';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ItemIcon icon={icon} className={b('icon')} qa={qaAttributes.image} />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    contentClassName={b('text', {'without-title': !title})}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}

package/build/cjs/components/FileLink/FileLink.js

@@ -37,16 +37,23 @@ const FileExtensionThemes = {
 const LabelSizeMap = {
     l: 's',
     m: 's',
+    sm: 's',
     s: 'xs',
     xs: 'xs',
 };
+function getTextSize(size) {
+    if (size === 'sm') {
+        return 'm';
+    }
+    return size;
+}
 const FileLink = (props) => {
     const { hostname } = React.useContext(locationContext_1.LocationContext);
     const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, extraProps, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className), children: [(0, jsx_runtime_1.jsx)(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme, children: fileExt }), (0, jsx_runtime_1.jsx)("div", { className: b('link'), children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname), extraProps, { children: text })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ ext: fileExt, type, size: getTextSize(textSize), theme }, className), children: [(0, jsx_runtime_1.jsx)(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme, children: fileExt }), (0, jsx_runtime_1.jsx)("div", { className: b('link'), children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname), extraProps, { children: text })) })] }));
 };
 exports.default = FileLink;
 //# sourceMappingURL=FileLink.js.map

package/build/cjs/components/FileLink/FileLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileLink.js","sourceRoot":"../../../../src","sources":["components/FileLink/FileLink.tsx"],"names":[],"mappings":";;;AAuBA,gCAMC;;;AA7BD,qDAA+B;AAE/B,6CAAoD;AAEpD,4EAA8D;AAE9D,gDAAgD;AAIhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,IAAY,aAOX;AAPD,WAAY,aAAa;IACrB,4BAAW,CAAA;IACX,4BAAW,CAAA;IACX,4BAAW,CAAA;IACX,4BAAW,CAAA;IACX,4BAAW,CAAA;IACX,4BAAW,CAAA;AACf,CAAC,EAPW,aAAa,6BAAb,aAAa,QAOxB;AAED,SAAgB,UAAU,CAAC,IAAY;IACnC,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,OAAO,aAAa,CAAC,GAAG,CAAC;IAC7B,CAAC;IACD,oEAAoE;IACpE,OAAO,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAG,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC;AAED,MAAM,mBAAmB,GAAG;IACxB,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ;IAC7B,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM;IAC3B,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS;IAC9B,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS;IAC9B,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,QAAQ;IAC7B,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS;CACjC,CAAC;AAEF,MAAM,YAAY,GAAyC;IACvD,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC/D,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAe,CAAC,CAAC;IACrD,MAAM,EACF,IAAI,EACJ,IAAI,EACJ,IAAI,GAAG,UAAU,EACjB,QAAQ,GAAG,GAAG,EACd,SAAS,EACT,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,GACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAkB,CAAC;IAClD,MAAM,UAAU,GAAG,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,SAAS,CAAwB,CAAC;IACtF,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEzC,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,SAAS,CAAC,aACrE,uBAAC,aAAK,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,YAChE,OAAO,GACJ,EACR,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,4CACI,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,IACX,IAAA,oBAAY,EAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,UAAU,cAEb,IAAI,IACL,GACF,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Label, LabelProps} from '@gravity-ui/uikit';\n\nimport {LocationContext} from '../../context/locationContext';\nimport {FileLinkProps, TextSize} from '../../models';\nimport {block, getLinkProps} from '../../utils';\n\nimport './FileLink.scss';\n\nconst b = block('file-link');\n\nconst FIGMA_URL = 'https://www.figma.com';\n\nexport enum FileExtension {\n    PDF = 'pdf',\n    DOC = 'doc',\n    XLS = 'xls',\n    PPT = 'ppt',\n    FIG = 'fig',\n    ZIP = 'zip',\n}\n\nexport function getFileExt(name: string) {\n    if (name?.includes(FIGMA_URL)) {\n        return FileExtension.FIG;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return name && name.split('.').pop()!.toLowerCase();\n}\n\nconst FileExtensionThemes = {\n    [FileExtension.PDF]: 'danger',\n    [FileExtension.DOC]: 'info',\n    [FileExtension.XLS]: 'success',\n    [FileExtension.PPT]: 'warning',\n    [FileExtension.FIG]: 'normal',\n    [FileExtension.ZIP]: 'unknown',\n};\n\nconst LabelSizeMap: Record<TextSize, LabelProps['size']> = {\n    l: 's',\n    m: 's',\n    s: 'xs',\n    xs: 'xs',\n};\n\nconst FileLink = (props: React.PropsWithChildren<FileLinkProps>) => {\n    const {hostname} = React.useContext(LocationContext);\n    const {\n        href,\n        text,\n        type = 'vertical',\n        textSize = 'm',\n        className,\n        theme = 'default',\n        onClick,\n        tabIndex,\n        urlTitle,\n        extraProps,\n    } = props;\n    const fileExt = getFileExt(href) as FileExtension;\n    const labelTheme = (FileExtensionThemes[fileExt] || 'unknown') as LabelProps['theme'];\n    const labelSize = LabelSizeMap[textSize];\n\n    return (\n        <div className={b({ext: fileExt, type, size: textSize, theme}, className)}>\n            <Label className={b('file-label')} size={labelSize} theme={labelTheme}>\n                {fileExt}\n            </Label>\n            <div className={b('link')}>\n                <a\n                    href={href}\n                    onClick={onClick}\n                    tabIndex={tabIndex}\n                    title={urlTitle}\n                    {...getLinkProps(href, hostname)}\n                    {...extraProps}\n                >\n                    {text}\n                </a>\n            </div>\n        </div>\n    );\n};\n\nexport default FileLink;\n"]}
+{"version":3,"file":"FileLink.js","sourceRoot":"../../../../src","sources":["components/FileLink/FileLink.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Label, LabelProps} from '@gravity-ui/uikit';\n\nimport {LocationContext} from '../../context/locationContext';\nimport {FileLinkProps, TextSize} from '../../models';\nimport {block, getLinkProps} from '../../utils';\n\nimport './FileLink.scss';\n\nconst b = block('file-link');\n\nconst FIGMA_URL = 'https://www.figma.com';\n\nexport enum FileExtension {\n    PDF = 'pdf',\n    DOC = 'doc',\n    XLS = 'xls',\n    PPT = 'ppt',\n    FIG = 'fig',\n    ZIP = 'zip',\n}\n\nexport function getFileExt(name: string) {\n    if (name?.includes(FIGMA_URL)) {\n        return FileExtension.FIG;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return name && name.split('.').pop()!.toLowerCase();\n}\n\nconst FileExtensionThemes = {\n    [FileExtension.PDF]: 'danger',\n    [FileExtension.DOC]: 'info',\n    [FileExtension.XLS]: 'success',\n    [FileExtension.PPT]: 'warning',\n    [FileExtension.FIG]: 'normal',\n    [FileExtension.ZIP]: 'unknown',\n};\n\nconst LabelSizeMap: Record<TextSize, LabelProps['size']> = {\n    l: 's',\n    m: 's',\n    sm: 's',\n    s: 'xs',\n    xs: 'xs',\n};\n\nfunction getTextSize(size: TextSize) {\n    if (size === 'sm') {\n        return 'm';\n    }\n\n    return size;\n}\n\nconst FileLink = (props: React.PropsWithChildren<FileLinkProps>) => {\n    const {hostname} = React.useContext(LocationContext);\n    const {\n        href,\n        text,\n        type = 'vertical',\n        textSize = 'm',\n        className,\n        theme = 'default',\n        onClick,\n        tabIndex,\n        urlTitle,\n        extraProps,\n    } = props;\n    const fileExt = getFileExt(href) as FileExtension;\n    const labelTheme = (FileExtensionThemes[fileExt] || 'unknown') as LabelProps['theme'];\n    const labelSize = LabelSizeMap[textSize];\n\n    return (\n        <div className={b({ext: fileExt, type, size: getTextSize(textSize), theme}, className)}>\n            <Label className={b('file-label')} size={labelSize} theme={labelTheme}>\n                {fileExt}\n            </Label>\n            <div className={b('link')}>\n                <a\n                    href={href}\n                    onClick={onClick}\n                    tabIndex={tabIndex}\n                    title={urlTitle}\n                    {...getLinkProps(href, hostname)}\n                    {...extraProps}\n                >\n                    {text}\n                </a>\n            </div>\n        </div>\n    );\n};\n\nexport default FileLink;\n"]}

package/build/cjs/components/FullWidthBackground/FullWidthBackground.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
 const constants_1 = require("../../constants.js");
 const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('FullWidthBackground');

package/build/cjs/components/FullWidthBackground/FullWidthBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullWidthBackground.js","sourceRoot":"../../../../src","sources":["components/FullWidthBackground/FullWidthBackground.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,uEAAuC;AAEvC,kDAA4C;AAE5C,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,qBAAqB,CAAC,CAAC;AAOvC,SAAS,UAAU,CAAC,KAAa;IAC7B,OAAO,KAAK,GAAG,uBAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED,MAAqB,mBAAoB,SAAQ,KAAK,CAAC,SAEtD;IAFD;;QAGY,QAAG,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAExC,UAAK,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;;YAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;gBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;gBAChF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvE,MAAM,EAAC,IAAI,EAAC,GAAG,MAAA,MAAA,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,mCAAI,EAAC,IAAI,EAAE,CAAC,EAAC,CAAC;gBAEtE,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC;gBAC5C,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,IAAI,GAAG,OAAO,IAAI,CAAC;YAC3C,CAAC;QACL,CAAC,EAAE,GAAG,CAAC,CAAC;IAsBZ,CAAC;IApBG,iBAAiB;;QACb,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,0CAAE,OAAO,0CAAE,aAAa,EAAE,CAAC;YACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YAC3D,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QACnE,CAAC;IACL,CAAC;IAED,oBAAoB;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACF,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,YACrE,QAAQ,GACP,CACT,CAAC;IACN,CAAC;CACJ;AArCD,sCAqCC","sourcesContent":["import * as React from 'react';\n\nimport debounce from 'lodash/debounce';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ClassNameProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './FullWidthBackground.scss';\n\nconst b = block('FullWidthBackground');\n\nexport interface FullWidthBackgroundProps extends ClassNameProps {\n    style?: React.CSSProperties;\n    theme?: 'default' | 'rounded';\n}\n\nfunction getPadding(width: number) {\n    return width > BREAKPOINTS.sm ? 16 : 8;\n}\n\nexport default class FullWidthBackground extends React.Component<\n    React.PropsWithChildren<FullWidthBackgroundProps>\n> {\n    private ref = React.createRef<HTMLDivElement>();\n\n    private setBg = debounce(() => {\n        if (this.ref && this.ref.current) {\n            const bg = this.ref.current;\n            const width = document.documentElement.clientWidth || document.body.clientWidth;\n            const padding = this.props.theme === 'rounded' ? getPadding(width) : 0;\n            const {left} = bg.parentElement?.getBoundingClientRect() ?? {left: 0};\n\n            bg.style.width = `${width - padding * 2}px`;\n            bg.style.left = `-${left - padding}px`;\n        }\n    }, 100);\n\n    componentDidMount() {\n        if (this?.ref?.current?.parentElement) {\n            this.ref.current.parentElement.style.position = 'relative';\n            this.setBg();\n            window.addEventListener('resize', this.setBg, {passive: true});\n        }\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('resize', this.setBg);\n    }\n\n    render() {\n        const {children, className, style, theme = 'default'} = this.props;\n        return (\n            <div className={b({[theme]: true}, className)} ref={this.ref} style={style}>\n                {children}\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"FullWidthBackground.js","sourceRoot":"../../../../src","sources":["components/FullWidthBackground/FullWidthBackground.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,0EAAuC;AAEvC,kDAA4C;AAE5C,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,qBAAqB,CAAC,CAAC;AAOvC,SAAS,UAAU,CAAC,KAAa;IAC7B,OAAO,KAAK,GAAG,uBAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED,MAAqB,mBAAoB,SAAQ,KAAK,CAAC,SAEtD;IAFD;;QAGY,QAAG,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAExC,UAAK,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;;YAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;gBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;gBAChF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvE,MAAM,EAAC,IAAI,EAAC,GAAG,MAAA,MAAA,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,mCAAI,EAAC,IAAI,EAAE,CAAC,EAAC,CAAC;gBAEtE,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC;gBAC5C,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,IAAI,GAAG,OAAO,IAAI,CAAC;YAC3C,CAAC;QACL,CAAC,EAAE,GAAG,CAAC,CAAC;IAsBZ,CAAC;IApBG,iBAAiB;;QACb,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,0CAAE,OAAO,0CAAE,aAAa,EAAE,CAAC;YACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YAC3D,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QACnE,CAAC;IACL,CAAC;IAED,oBAAoB;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACF,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnE,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,YACrE,QAAQ,GACP,CACT,CAAC;IACN,CAAC;CACJ;AArCD,sCAqCC","sourcesContent":["import * as React from 'react';\n\nimport debounce from 'lodash/debounce';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ClassNameProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './FullWidthBackground.scss';\n\nconst b = block('FullWidthBackground');\n\nexport interface FullWidthBackgroundProps extends ClassNameProps {\n    style?: React.CSSProperties;\n    theme?: 'default' | 'rounded';\n}\n\nfunction getPadding(width: number) {\n    return width > BREAKPOINTS.sm ? 16 : 8;\n}\n\nexport default class FullWidthBackground extends React.Component<\n    React.PropsWithChildren<FullWidthBackgroundProps>\n> {\n    private ref = React.createRef<HTMLDivElement>();\n\n    private setBg = debounce(() => {\n        if (this.ref && this.ref.current) {\n            const bg = this.ref.current;\n            const width = document.documentElement.clientWidth || document.body.clientWidth;\n            const padding = this.props.theme === 'rounded' ? getPadding(width) : 0;\n            const {left} = bg.parentElement?.getBoundingClientRect() ?? {left: 0};\n\n            bg.style.width = `${width - padding * 2}px`;\n            bg.style.left = `-${left - padding}px`;\n        }\n    }, 100);\n\n    componentDidMount() {\n        if (this?.ref?.current?.parentElement) {\n            this.ref.current.parentElement.style.position = 'relative';\n            this.setBg();\n            window.addEventListener('resize', this.setBg, {passive: true});\n        }\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('resize', this.setBg);\n    }\n\n    render() {\n        const {children, className, style, theme = 'default'} = this.props;\n        return (\n            <div className={b({[theme]: true}, className)} ref={this.ref} style={style}>\n                {children}\n            </div>\n        );\n    }\n}\n"]}

package/build/cjs/components/FullscreenImage/FullscreenImage.css

@@ -6,12 +6,31 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__image-wrapper {
   position: relative;
 }
-.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
+.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__expand-icon-wrapper {
   opacity: 1;
 }
 .pc-fullscreen-image__modal-content {
   position: relative;
   border-radius: var(--pc-border-radius);
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content-wrapper {
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content_loaded {
+  max-width: fit-content;
+}
+.pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  justify-content: center;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
+  background-color: transparent;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__expand-icon-wrapper, .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__close-icon-wrapper {
+  opacity: 1;
 }
 .pc-fullscreen-image__modal-image {
   display: block;
@@ -19,10 +38,32 @@ unpredictable css rules order in build */
   max-height: 70vh;
   overflow: hidden;
 }
+.pc-fullscreen-image__modal-slider {
+  max-width: 100vw;
+  width: 100%;
+  height: 100vh;
+}
+.pc-fullscreen-image__modal-slider_item {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-fullscreen-image__modal-slider_item-image {
+  display: block;
+  margin: auto;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  margin-top: 40px;
+  max-height: calc(100vh - 120px);
+  max-width: 100%;
+  object-fit: contain;
+  object-position: center;
+}
 .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
   border-radius: var(--pc-border-radius);
 }
-.pc-fullscreen-image__icon-wrapper {
+.pc-fullscreen-image__expand-icon-wrapper {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -35,9 +76,45 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--g-color-base-simple-hover-solid);
+  cursor: pointer;
+  opacity: 0;
+  transition: 0.3s;
   position: absolute;
   right: 16px;
   top: 16px;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus {
+  opacity: 1;
+}
+@media (max-width: 769px) {
+  .pc-fullscreen-image__expand-icon-wrapper {
+    opacity: 1;
+  }
+}
+.pc-fullscreen-image__close-icon-wrapper {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 8px;
@@ -45,36 +122,37 @@ unpredictable css rules order in build */
   cursor: pointer;
   opacity: 0;
   transition: 0.3s;
+  z-index: 1001;
+  position: absolute;
+  right: 24px;
+  top: 24px;
 }
-.pc-fullscreen-image__icon-wrapper:focus {
+.pc-fullscreen-image__close-icon-wrapper:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
+.pc-fullscreen-image__close-icon-wrapper:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-fullscreen-image__icon-wrapper:focus {
+.pc-fullscreen-image__close-icon-wrapper:focus {
   opacity: 1;
 }
+@media (max-width: 769px) {
+  .pc-fullscreen-image__close-icon-wrapper {
+    opacity: 1;
+  }
+}
 .pc-fullscreen-image__icon {
   color: var(--g-color-text-hint);
 }
 .pc-fullscreen-image__icon_hover:hover {
   color: var(--g-color-text-secondary);
 }
-@media (max-width: 1185px) {
-  .pc-fullscreen-image__modal-image {
-    width: 100%;
-  }
-}
-@media (max-width: 1081px) {
-  .pc-fullscreen-image__image {
-    pointer-events: none;
-  }
-  .pc-fullscreen-image__icon-wrapper {
-    display: none;
+@media (max-width: 769px) {
+  .pc-fullscreen-image__modal .g-modal__content-wrapper {
+    margin: 8px;
   }
-  .pc-fullscreen-image__modal {
-    display: none !important; /* stylelint-disable-line declaration-no-important */
+  .pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+    margin: 0;
   }
 }

package/build/cjs/components/FullscreenImage/FullscreenImage.d.ts

@@ -1,10 +1,15 @@
 import * as React from 'react';
+import { ImageProps as ModelImageProps } from "../../models/index.js";
 import { ImageProps } from "../Image/Image.js";
 export interface FullscreenImageProps extends ImageProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: React.CSSProperties;
     extraProps?: React.HTMLProps<HTMLDivElement>;
+    sliderData?: {
+        items: ModelImageProps[];
+        initialIndex: number;
+    };
 }
 declare const FullscreenImage: (props: FullscreenImageProps) => import("react/jsx-runtime").JSX.Element;
 export default FullscreenImage;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -5,18 +5,30 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const blocks_1 = require("../../blocks/index.js");
+const models_1 = require("../../models/index.js");
 const utils_1 = require("../../utils/index.js");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image.js"));
+const utils_2 = require("../Media/Image/utils.js");
 const i18n_1 = require("./i18n/index.js");
 const b = (0, utils_1.block)('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 const FullscreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps } = props;
+    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps, } = props;
     const [isOpened, setIsOpened] = React.useState(false);
+    const [sliderLoaded, setSliderLoaded] = React.useState(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b() }, extraProps, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('image-wrapper'), children: [(0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })), (0, jsx_runtime_1.jsx)("button", { className: b('icon-wrapper'), onClick: openModal, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && ((0, jsx_runtime_1.jsxs)(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content'), children: [(0, jsx_runtime_1.jsx)("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), (0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))] }))] })));
+    React.useEffect(() => {
+        if (sliderData && !isOpened) {
+            setSliderLoaded(false);
+        }
+    }, [isOpened, sliderData]);
+    const handleSliderImageLoad = () => {
+        setSliderLoaded(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b() }, extraProps, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('image-wrapper'), children: [(0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })), (0, jsx_runtime_1.jsx)("button", { className: b('expand-icon-wrapper'), onClick: openModal, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && ((0, jsx_runtime_1.jsxs)(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }), children: [(0, jsx_runtime_1.jsx)("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), sliderData ? ((0, jsx_runtime_1.jsx)("div", { className: b('modal-slider'), children: (0, jsx_runtime_1.jsx)(blocks_1.SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: models_1.SliderType.FullscreenCard, children: sliderData.items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: b('modal-slider_item'), children: (0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({ onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper') }, (0, utils_2.getMediaImage)(item))) }, index))) }) })) : ((0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))] }))] })));
 };
 exports.default = FullscreenImage;
 //# sourceMappingURL=FullscreenImage.js.map

package/build/cjs/components/FullscreenImage/FullscreenImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenImage.js","sourceRoot":"../../../../src","sources":["components/FullscreenImage/FullscreenImage.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA+D;AAC/D,6CAA8C;AAE9C,gDAAkC;AAClC,sEAAiD;AAEjD,0CAA4B;AAW5B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,kBAAkB,CAAC,CAAC;AACpC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IACpD,MAAM,EAAC,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,GAAG,IAAA,WAAI,EAAC,SAAS,CAAC,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAC/F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACH,+CAAK,SAAS,EAAE,CAAC,EAAE,IAAM,UAAU,eAC/B,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,eAAK,oBACE,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,EACrC,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,UAAU,IACnB,EACF,mCAAQ,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,YACpD,uBAAC,YAAI,IACD,IAAI,EAAE,6BAAqB,EAC3B,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACG,IACP,EACL,QAAQ,IAAI,CACT,wBAAC,aAAK,IACF,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,gBAAgB,EAAE,CAAC,CAAC,eAAe,CAAC,aAEpC,mCACI,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAC7C,OAAO,EAAE,UAAU,gBACP,IAAA,WAAI,EAAC,OAAO,CAAC,YAEzB,uBAAC,YAAI,IACD,IAAI,EAAE,aAAK,EACX,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,GACrC,GACG,EACT,uBAAC,eAAK,oBAAK,KAAK,IAAE,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,IAAI,IAC9D,CACX,KACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';\nimport {Icon, Modal} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils';\nimport Image, {ImageProps} from '../Image/Image';\n\nimport {i18n} from './i18n';\n\nimport './FullscreenImage.scss';\n\nexport interface FullscreenImageProps extends ImageProps {\n    imageClassName?: string;\n    modalImageClass?: string;\n    imageStyle?: React.CSSProperties;\n    extraProps?: React.HTMLProps<HTMLDivElement>;\n}\n\nconst b = block('fullscreen-image');\nconst FULL_SCREEN_ICON_SIZE = 18;\nconst CLOSE_ICON_SIZE = 24;\n\nconst FullscreenImage = (props: FullscreenImageProps) => {\n    const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps} = props;\n    const [isOpened, setIsOpened] = React.useState(false);\n\n    const openModal = () => setIsOpened(true);\n    const closeModal = () => setIsOpened(false);\n\n    return (\n        <div className={b()} {...extraProps}>\n            <div className={b('image-wrapper')}>\n                <Image\n                    {...props}\n                    alt={alt}\n                    className={b('image', imageClassName)}\n                    onClick={openModal}\n                    style={imageStyle}\n                />\n                <button className={b('icon-wrapper')} onClick={openModal}>\n                    <Icon\n                        data={ChevronsExpandUpRight}\n                        width={FULL_SCREEN_ICON_SIZE}\n                        height={FULL_SCREEN_ICON_SIZE}\n                        className={b('icon')}\n                    />\n                </button>\n            </div>\n            {isOpened && (\n                <Modal\n                    open={isOpened}\n                    onClose={closeModal}\n                    className={b('modal')}\n                    contentClassName={b('modal-content')}\n                >\n                    <button\n                        className={b('icon-wrapper', {visible: true})}\n                        onClick={closeModal}\n                        aria-label={i18n('close')}\n                    >\n                        <Icon\n                            data={Xmark}\n                            width={CLOSE_ICON_SIZE}\n                            height={CLOSE_ICON_SIZE}\n                            className={b('icon', {hover: true})}\n                        />\n                    </button>\n                    <Image {...props} className={b('modal-image', modalImageClass)} />\n                </Modal>\n            )}\n        </div>\n    );\n};\n\nexport default FullscreenImage;\n"]}
+{"version":3,"file":"FullscreenImage.js","sourceRoot":"../../../../src","sources":["components/FullscreenImage/FullscreenImage.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA+D;AAC/D,6CAA8C;AAE9C,kDAAyC;AACzC,kDAAuE;AACvE,gDAAkC;AAClC,sEAAiD;AACjD,mDAAmD;AAEnD,0CAA4B;AAY5B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,kBAAkB,CAAC,CAAC;AACpC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IACpD,MAAM,EACF,cAAc,EACd,UAAU,EACV,eAAe,EACf,UAAU,EACV,GAAG,GAAG,IAAA,WAAI,EAAC,SAAS,CAAC,EACrB,UAAU,GACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1B,eAAe,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,+CAAK,SAAS,EAAE,CAAC,EAAE,IAAM,UAAU,eAC/B,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,eAAK,oBACE,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,EACrC,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,UAAU,IACnB,EACF,mCAAQ,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,OAAO,EAAE,SAAS,YAC3D,uBAAC,YAAI,IACD,IAAI,EAAE,6BAAqB,EAC3B,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACG,IACP,EACL,QAAQ,IAAI,CACT,wBAAC,aAAK,IACF,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,aAAa,EAAE,OAAO,CAAC,UAAU,CAAC,EAAC,CAAC,EAC3D,gBAAgB,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,MAAM,EAAE,YAAY,EAAC,CAAC,aAE5D,mCACI,SAAS,EAAE,CAAC,CAAC,oBAAoB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EACnD,OAAO,EAAE,UAAU,gBACP,IAAA,WAAI,EAAC,OAAO,CAAC,YAEzB,uBAAC,YAAI,IACD,IAAI,EAAE,aAAK,EACX,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,GACrC,GACG,EACR,UAAU,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7B,uBAAC,oBAAW,IACR,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,YAAY,EAAE,CAAC,EACf,IAAI,EAAE,mBAAU,CAAC,cAAc,YAE9B,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,gCAAiB,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAC9C,uBAAC,eAAK,kBACF,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CACR,yBAAyB,EACzB,eAAe,CAClB,EACD,kBAAkB,EAAE,CAAC,CACjB,iCAAiC,CACpC,IACG,IAAA,qBAAa,EAAC,IAAI,CAAC,EACzB,IAXI,KAAK,CAYT,CACT,CAAC,GACQ,GACZ,CACT,CAAC,CAAC,CAAC,CACA,uBAAC,eAAK,oBAAK,KAAK,IAAE,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,IAAI,CACrE,IACG,CACX,KACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';\nimport {Icon, Modal} from '@gravity-ui/uikit';\n\nimport {SliderBlock} from '../../blocks';\nimport {ImageProps as ModelImageProps, SliderType} from '../../models';\nimport {block} from '../../utils';\nimport Image, {ImageProps} from '../Image/Image';\nimport {getMediaImage} from '../Media/Image/utils';\n\nimport {i18n} from './i18n';\n\nimport './FullscreenImage.scss';\n\nexport interface FullscreenImageProps extends ImageProps {\n    imageClassName?: string;\n    modalImageClass?: string;\n    imageStyle?: React.CSSProperties;\n    extraProps?: React.HTMLProps<HTMLDivElement>;\n    sliderData?: {items: ModelImageProps[]; initialIndex: number};\n}\n\nconst b = block('fullscreen-image');\nconst FULL_SCREEN_ICON_SIZE = 18;\nconst CLOSE_ICON_SIZE = 24;\n\nconst FullscreenImage = (props: FullscreenImageProps) => {\n    const {\n        imageClassName,\n        sliderData,\n        modalImageClass,\n        imageStyle,\n        alt = i18n('img-alt'),\n        extraProps,\n    } = props;\n    const [isOpened, setIsOpened] = React.useState(false);\n    const [sliderLoaded, setSliderLoaded] = React.useState(false);\n\n    const openModal = () => setIsOpened(true);\n    const closeModal = () => setIsOpened(false);\n\n    React.useEffect(() => {\n        if (sliderData && !isOpened) {\n            setSliderLoaded(false);\n        }\n    }, [isOpened, sliderData]);\n\n    const handleSliderImageLoad = () => {\n        setSliderLoaded(true);\n    };\n\n    return (\n        <div className={b()} {...extraProps}>\n            <div className={b('image-wrapper')}>\n                <Image\n                    {...props}\n                    alt={alt}\n                    className={b('image', imageClassName)}\n                    onClick={openModal}\n                    style={imageStyle}\n                />\n                <button className={b('expand-icon-wrapper')} onClick={openModal}>\n                    <Icon\n                        data={ChevronsExpandUpRight}\n                        width={FULL_SCREEN_ICON_SIZE}\n                        height={FULL_SCREEN_ICON_SIZE}\n                        className={b('icon')}\n                    />\n                </button>\n            </div>\n            {isOpened && (\n                <Modal\n                    open={isOpened}\n                    onClose={closeModal}\n                    className={b('modal', {'with-slider': Boolean(sliderData)})}\n                    contentClassName={b('modal-content', {loaded: sliderLoaded})}\n                >\n                    <button\n                        className={b('close-icon-wrapper', {visible: true})}\n                        onClick={closeModal}\n                        aria-label={i18n('close')}\n                    >\n                        <Icon\n                            data={Xmark}\n                            width={CLOSE_ICON_SIZE}\n                            height={CLOSE_ICON_SIZE}\n                            className={b('icon', {hover: true})}\n                        />\n                    </button>\n                    {sliderData ? (\n                        <div className={b('modal-slider')}>\n                            <SliderBlock\n                                initialSlide={sliderData.initialIndex}\n                                slidesToShow={1}\n                                type={SliderType.FullscreenCard}\n                            >\n                                {sliderData.items.map((item, index) => (\n                                    <div key={index} className={b('modal-slider_item')}>\n                                        <Image\n                                            onLoad={handleSliderImageLoad}\n                                            className={b(\n                                                'modal-slider_item-image',\n                                                modalImageClass,\n                                            )}\n                                            containerClassName={b(\n                                                'modal-slider_item-image-wrapper',\n                                            )}\n                                            {...getMediaImage(item)}\n                                        />\n                                    </div>\n                                ))}\n                            </SliderBlock>\n                        </div>\n                    ) : (\n                        <Image {...props} className={b('modal-image', modalImageClass)} />\n                    )}\n                </Modal>\n            )}\n        </div>\n    );\n};\n\nexport default FullscreenImage;\n"]}

package/build/cjs/components/HTML/HTML.d.ts

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import { QAProps } from "../../models/common.js";
-export interface HTMLProps {
-    children?: string;
+import { ClassNameProps, QAProps, TagName } from "../../models/common.js";
+export interface HTMLExtraProps {
+    tagName?: TagName;
+    contentPosition?: 'start' | 'end';
+    contentClassName?: string;
+    onlyContent?: boolean;
+}
+export interface HTMLProps extends HTMLExtraProps, React.PropsWithChildren, QAProps, ClassNameProps {
+    content?: string;
     block?: boolean;
-    className?: string;
     itemProp?: string;
     id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp, id, qa, }: React.PropsWithChildren<HTMLProps & QAProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ content, children, block, className, contentClassName, qa, contentPosition, tagName, onlyContent, ...rest }: HTMLProps) => React.DOMElement<{
+    itemProp?: string;
+    id?: string;
     dangerouslySetInnerHTML: {
-        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & Iterable<React.ReactNode>) | (string & React.ReactPortal);
+        __html: string;
     };
     className: string | undefined;
-    itemProp: string | undefined;
-    id: string | undefined;
     'data-qa': string | undefined;
+}, Element> | React.DetailedReactHTMLElement<{
+    className: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -3,17 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils/index.js");
-const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
-    if (!children) {
-        return null;
+const HTML = (_a) => {
+    var { content, children, block = false, className, contentClassName, qa, contentPosition = 'start', tagName = 'span', onlyContent = false } = _a, rest = tslib_1.__rest(_a, ["content", "children", "block", "className", "contentClassName", "qa", "contentPosition", "tagName", "onlyContent"]);
+    const renderedContent = React.useMemo(() => {
+        return content
+            ? React.createElement((0, utils_1.selectTagName)({ content, block, tagName, children }), Object.assign({ dangerouslySetInnerHTML: { __html: content }, className: contentClassName, 'data-qa': qa }, rest))
+            : null;
+    }, [block, children, content, contentClassName, qa, rest, tagName]);
+    if (onlyContent) {
+        return renderedContent;
     }
-    return React.createElement(block || (0, utils_1.hasBlockTag)(children) ? 'div' : 'span', {
-        dangerouslySetInnerHTML: { __html: children },
-        className,
-        itemProp,
-        id,
-        'data-qa': qa,
-    });
+    if (children) {
+        return React.createElement(tagName, {
+            className,
+        }, contentPosition === 'start' ? renderedContent : null, children, contentPosition === 'end' ? renderedContent : null);
+    }
+    return renderedContent;
 };
 exports.default = HTML;
 //# sourceMappingURL=HTML.js.map

package/build/cjs/components/HTML/HTML.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAG/B,gDAAwC;AAUxC,MAAM,IAAI,GAAG,CAAC,EACV,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,SAAS,EACT,QAAQ,EACR,EAAE,EACF,EAAE,GACyC,EAAE,EAAE;IAC/C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,IAAI,IAAA,mBAAW,EAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE;QACxE,uBAAuB,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;QAC3C,SAAS;QACT,QAAQ;QACR,EAAE;QACF,SAAS,EAAE,EAAE;KAChB,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {QAProps} from '../../models/common';\nimport {hasBlockTag} from '../../utils';\n\nexport interface HTMLProps {\n    children?: string;\n    block?: boolean;\n    className?: string;\n    itemProp?: string;\n    id?: string;\n}\n\nconst HTML = ({\n    children,\n    block = false,\n    className,\n    itemProp,\n    id,\n    qa,\n}: React.PropsWithChildren<HTMLProps & QAProps>) => {\n    if (!children) {\n        return null;\n    }\n\n    return React.createElement(block || hasBlockTag(children) ? 'div' : 'span', {\n        dangerouslySetInnerHTML: {__html: children},\n        className,\n        itemProp,\n        id,\n        'data-qa': qa,\n    });\n};\n\nexport default HTML;\n"]}
+{"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAG/B,gDAA0C;AAmB1C,MAAM,IAAI,GAAG,CAAC,EAWF,EAAE,EAAE;QAXF,EACV,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,SAAS,EACT,gBAAgB,EAChB,EAAE,EACF,eAAe,GAAG,OAAO,EACzB,OAAO,GAAG,MAAM,EAChB,WAAW,GAAG,KAAK,OAEX,EADL,IAAI,sBAVG,oHAWb,CADU;IAEP,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,OAAO;YACV,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAA,qBAAa,EAAC,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,CAAC,kBAClE,uBAAuB,EAAE,EAAC,MAAM,EAAE,OAAO,EAAC,EAC1C,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,EAAE,IACV,IAAI,EACT;YACJ,CAAC,CAAC,IAAI,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpE,IAAI,WAAW,EAAE,CAAC;QACd,OAAO,eAAe,CAAC;IAC3B,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,EACP;YACI,SAAS;SACZ,EACD,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,EACpD,QAAQ,EACR,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CACrD,CAAC;IACN,CAAC;IAED,OAAO,eAAe,CAAC;AAC3B,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ClassNameProps, QAProps, TagName} from '../../models/common';\nimport {selectTagName} from '../../utils';\n\nexport interface HTMLExtraProps {\n    tagName?: TagName;\n    contentPosition?: 'start' | 'end';\n    contentClassName?: string;\n    onlyContent?: boolean;\n}\nexport interface HTMLProps\n    extends HTMLExtraProps,\n        React.PropsWithChildren,\n        QAProps,\n        ClassNameProps {\n    content?: string;\n    block?: boolean;\n    itemProp?: string;\n    id?: string;\n}\n\nconst HTML = ({\n    content,\n    children,\n    block = false,\n    className,\n    contentClassName,\n    qa,\n    contentPosition = 'start',\n    tagName = 'span',\n    onlyContent = false,\n    ...rest\n}: HTMLProps) => {\n    const renderedContent = React.useMemo(() => {\n        return content\n            ? React.createElement(selectTagName({content, block, tagName, children}), {\n                  dangerouslySetInnerHTML: {__html: content},\n                  className: contentClassName,\n                  'data-qa': qa,\n                  ...rest,\n              })\n            : null;\n    }, [block, children, content, contentClassName, qa, rest, tagName]);\n\n    if (onlyContent) {\n        return renderedContent;\n    }\n\n    if (children) {\n        return React.createElement(\n            tagName,\n            {\n                className,\n            },\n            contentPosition === 'start' ? renderedContent : null,\n            children,\n            contentPosition === 'end' ? renderedContent : null,\n        );\n    }\n\n    return renderedContent;\n};\n\nexport default HTML;\n"]}

package/build/cjs/components/ImageBase/ImageBase.js

@@ -13,7 +13,7 @@ const ImageBase = (_a) => {
     // It is still not supported. However it's nice to have ability to manage
     // this prop is good to have to improve Core Web Vitals.
     // So, here is a workaround to assign the attr.
-    (0, jsx_runtime_1.jsx)("img", Object.assign({ fetchpriority: fetchPriority, alt: alt }, props)));
+    (0, jsx_runtime_1.jsx)("img", Object.assign({ fetchPriority: fetchPriority, alt: alt }, props)));
 };
 exports.ImageBase = ImageBase;
 exports.default = exports.ImageBase;

package/build/cjs/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.js","sourceRoot":"../../../../src","sources":["components/ImageBase/ImageBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6EAAqE;AAW9D,MAAM,SAAS,GAAG,CAAC,EAA8C,EAAE,EAAE;QAAlD,EAAC,aAAa,EAAE,GAAG,OAA2B,EAAtB,KAAK,sBAA7B,wBAA8B,CAAD;IACnD,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAE/C,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,uBAAC,KAAK,kBAAC,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CAC/D,CAAC,CAAC,CAAC;IACA,6DAA6D;IAC7D,yEAAyE;IACzE,wDAAwD;IACxD,+CAA+C;IAC/C,8CAAU,aAAa,EAAE,aAAa,EAAG,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CACnE,CAAC;AACN,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB;AAEF,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ImageContext} from '../../context/imageContext/imageContext';\nimport {ImageObjectProps} from '../../models';\n\nexport interface ImageBaseProps extends Partial<ImageObjectProps> {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLDivElement>;\n    onError?: () => void;\n}\n\nexport const ImageBase = ({fetchPriority, alt, ...props}: ImageBaseProps) => {\n    const {Image} = React.useContext(ImageContext);\n\n    return Image ? (\n        <Image fetchPriority={fetchPriority} alt={alt} {...props} />\n    ) : (\n        // There is an issue with fetchpriority attr in img in React.\n        // It is still not supported. However it's nice to have ability to manage\n        // this prop is good to have to improve Core Web Vitals.\n        // So, here is a workaround to assign the attr.\n        <img {...{fetchpriority: fetchPriority}} alt={alt} {...props} />\n    );\n};\n\nexport default ImageBase;\n"]}
+{"version":3,"file":"ImageBase.js","sourceRoot":"../../../../src","sources":["components/ImageBase/ImageBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6EAAqE;AAW9D,MAAM,SAAS,GAAG,CAAC,EAA8C,EAAE,EAAE;QAAlD,EAAC,aAAa,EAAE,GAAG,OAA2B,EAAtB,KAAK,sBAA7B,wBAA8B,CAAD;IACnD,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAE/C,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,uBAAC,KAAK,kBAAC,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CAC/D,CAAC,CAAC,CAAC;IACA,6DAA6D;IAC7D,yEAAyE;IACzE,wDAAwD;IACxD,+CAA+C;IAC/C,8CAAU,aAAa,EAAE,aAAa,EAAG,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CACnE,CAAC;AACN,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB;AAEF,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ImageContext} from '../../context/imageContext/imageContext';\nimport {ImageObjectProps} from '../../models';\n\nexport interface ImageBaseProps extends Partial<ImageObjectProps> {\n    style?: React.CSSProperties;\n    className?: string;\n    onClick?: React.MouseEventHandler;\n    onLoad?: React.ReactEventHandler<HTMLDivElement>;\n    onError?: () => void;\n}\n\nexport const ImageBase = ({fetchPriority, alt, ...props}: ImageBaseProps) => {\n    const {Image} = React.useContext(ImageContext);\n\n    return Image ? (\n        <Image fetchPriority={fetchPriority} alt={alt} {...props} />\n    ) : (\n        // There is an issue with fetchpriority attr in img in React.\n        // It is still not supported. However it's nice to have ability to manage\n        // this prop is good to have to improve Core Web Vitals.\n        // So, here is a workaround to assign the attr.\n        <img {...{fetchPriority: fetchPriority}} alt={alt} {...props} />\n    );\n};\n\nexport default ImageBase;\n"]}

package/build/cjs/components/Link/Link.js

@@ -19,6 +19,7 @@ function getArrowSize(size) {
         case 'l':
             return 20;
         case 'm':
+        case 'sm':
             return 18;
         case 's':
             return 14;
@@ -26,6 +27,15 @@ function getArrowSize(size) {
             return 14;
     }
 }
+function getTextSize({ size, theme }) {
+    if (!size) {
+        return theme === 'back' ? 'l' : 'm';
+    }
+    if (size === 'sm') {
+        return 'm';
+    }
+    return size;
+}
 const LinkBlock = (props) => {
     const { text, url, arrow, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, extraProps, } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, ['normal']);
@@ -33,7 +43,6 @@ const LinkBlock = (props) => {
     const { hostname } = React.useContext(locationContext_1.LocationContext);
     const { tld } = React.useContext(localeContext_1.LocaleContext);
     const href = (0, utils_1.setUrlTld)(props.url, tld);
-    const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
         handleAnalytics(analyticsEvents);
     };
@@ -53,7 +62,7 @@ const LinkBlock = (props) => {
                 return null;
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: b({ size: textSize || defaultTextSize }, className), children: getLinkByType() }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: b({ size: getTextSize({ size: textSize, theme }) }, className), children: getLinkByType() }));
 };
 exports.default = LinkBlock;
 //# sourceMappingURL=Link.js.map