npm - @gravity-ui/page-constructor - Versions diffs - 7.0.0-beta.2 → 7.0.0-beta.3 - Mend

@gravity-ui/page-constructor 7.0.0-beta.2 → 7.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1133) hide show

package/build/esm/components/FileLink/FileLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileLink.js","sourceRoot":"../../../../src","sources":["components/FileLink/FileLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAa,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAE9D,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,6BAAoB;AAEhD,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,MAAM,CAAN,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,KAAb,aAAa,QAOxB;AAED,MAAM,UAAU,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,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,IAAI;CACX,CAAC;AAEF,SAAS,WAAW,CAAC,IAAc;IAC/B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAChB,OAAO,GAAG,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC/D,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,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,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAC,EAAE,SAAS,CAAC,aAClF,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,YAChE,OAAO,GACJ,EACR,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,~~0BACI~~,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,~~IACX~~,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,~~EAC5B~~,UAAU,~~cAEb~~,IAAI,~~IACL~~,GACF,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,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 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"]}
1	+ {"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/esm/components/FullWidthBackground/FullWidthBackground.js CHANGED Viewed

@@ -9,24 +9,19 @@ function getPadding(width) {
     return width > BREAKPOINTS.sm ? 16 : 8;
 }
 export default class FullWidthBackground extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = React.createRef();
-        this.setBg = debounce(() => {
-            var _a, _b;
-            if (this.ref && this.ref.current) {
-                const bg = this.ref.current;
-                const width = document.documentElement.clientWidth || document.body.clientWidth;
-                const padding = this.props.theme === 'rounded' ? getPadding(width) : 0;
-                const { left } = (_b = (_a = bg.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { left: 0 };
-                bg.style.width = `${width - padding * 2}px`;
-                bg.style.left = `-${left - padding}px`;
-            }
-        }, 100);
-    }
+    ref = React.createRef();
+    setBg = debounce(() => {
+        if (this.ref && this.ref.current) {
+            const bg = this.ref.current;
+            const width = document.documentElement.clientWidth || document.body.clientWidth;
+            const padding = this.props.theme === 'rounded' ? getPadding(width) : 0;
+            const { left } = bg.parentElement?.getBoundingClientRect() ?? { left: 0 };
+            bg.style.width = `${width - padding * 2}px`;
+            bg.style.left = `-${left - padding}px`;
+        }
+    }, 100);
     componentDidMount() {
-        var _a, _b;
-        if ((_b = (_a = this === null || this === void 0 ? void 0 : this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.parentElement) {
+        if (this?.ref?.current?.parentElement) {
             this.ref.current.parentElement.style.position = 'relative';
             this.setBg();
             window.addEventListener('resize', this.setBg, { passive: true });

package/build/esm/components/FullWidthBackground/FullWidthBackground.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FullWidthBackground.js","sourceRoot":"../../../../src","sources":["components/FullWidthBackground/FullWidthBackground.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAE5C,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAElC,OAAO,2BAA2B,CAAC;AAEnC,MAAM,CAAC,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;AAOvC,SAAS,UAAU,CAAC,KAAa;IAC7B,OAAO,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAEtD;~~IAFD;;QAGY~~,~~QAAG~~,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;~~QAExC~~,~~UAAK~~,GAAG,QAAQ,CAAC,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,cAAK,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","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"]}
1	+ {"version":3,"file":"FullWidthBackground.js","sourceRoot":"../../../../src","sources":["components/FullWidthBackground/FullWidthBackground.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAE5C,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAElC,OAAO,2BAA2B,CAAC;AAEnC,MAAM,CAAC,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;AAOvC,SAAS,UAAU,CAAC,KAAa;IAC7B,OAAO,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAEtD;IACW,GAAG,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;IAExC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1B,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;YAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YAChF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvE,MAAM,EAAC,IAAI,EAAC,GAAG,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAC,IAAI,EAAE,CAAC,EAAC,CAAC;YAEtE,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC;YAC5C,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,IAAI,GAAG,OAAO,IAAI,CAAC;QAC3C,CAAC;IACL,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,iBAAiB;QACb,IAAI,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,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,cAAK,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","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/esm/components/FullscreenImage/FullscreenImage.css CHANGED Viewed

@@ -102,6 +102,9 @@ unpredictable css rules order in build */
     opacity: 1;
   }
 }
+.pc-fullscreen-image__expand-icon-wrapper_visible {
+  opacity: 1;
+}
 .pc-fullscreen-image__close-icon-wrapper {
   display: inline-block;
   margin: 0;

package/build/esm/components/FullscreenImage/FullscreenImage.js CHANGED Viewed

@@ -26,7 +26,7 @@ const FullscreenImage = (props) => {
     const handleSliderImageLoad = () => {
         setSliderLoaded(true);
     };
-    return (_jsxs("div", Object.assign({ className: b() }, extraProps, { children: [_jsxs("div", { className: b('image-wrapper'), children: [_jsx(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })), _jsx("button", { className: b('expand-icon-wrapper'), onClick: openModal, children: _jsx(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && (_jsxs(Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }), children: [_jsx("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close'), children: _jsx(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), sliderData ? (_jsx("div", { className: b('modal-slider'), children: _jsx(SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: SliderType.FullscreenCard, children: sliderData.items.map((item, index) => (_jsx("div", { className: b('modal-slider_item'), children: _jsx(Image, Object.assign({ onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper') }, getMediaImage(item))) }, index))) }) })) : (_jsx(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))] }))] })));
+    return (_jsxs("div", { className: b(), ...extraProps, children: [_jsxs("div", { className: b('image-wrapper'), children: [_jsx(Image, { ...props, alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle }), _jsx("button", { className: b('expand-icon-wrapper'), onClick: openModal, children: _jsx(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && (_jsxs(Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }), children: [_jsx("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close'), children: _jsx(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), sliderData ? (_jsx("div", { className: b('modal-slider'), children: _jsx(SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: SliderType.FullscreenCard, children: sliderData.items.map((item, index) => (_jsx("div", { className: b('modal-slider_item'), children: _jsx(Image, { onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper'), ...getMediaImage(item) }) }, index))) }) })) : (_jsx(Image, { ...props, className: b('modal-image', modalImageClass) }))] }))] }));
 };
 export default FullscreenImage;
 //# sourceMappingURL=FullscreenImage.js.map

package/build/esm/components/FullscreenImage/FullscreenImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FullscreenImage.js","sourceRoot":"../../../../src","sources":["components/FullscreenImage/FullscreenImage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAC,IAAI,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,8BAAqB;AACzC,OAAO,EAAgC,UAAU,EAAC,8BAAqB;AACvE,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,KAAmB,0BAAuB;AACjD,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAEnD,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,OAAO,uBAAuB,CAAC;AAU/B,MAAM,CAAC,GAAG,KAAK,CAAC,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,IAAI,CAAC,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,~~6BAAK~~,SAAS,EAAE,CAAC,EAAE,~~IAAM~~,UAAU,~~eAC~~/B,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,KAAC,KAAK,~~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,iBAAQ,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,OAAO,EAAE,SAAS,YAC3D,KAAC,IAAI,IACD,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACG,IACP,EACL,QAAQ,IAAI,CACT,MAAC,KAAK,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,iBACI,SAAS,EAAE,CAAC,CAAC,oBAAoB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EACnD,OAAO,EAAE,UAAU,gBACP,IAAI,CAAC,OAAO,CAAC,YAEzB,KAAC,IAAI,IACD,IAAI,EAAE,KAAK,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,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7B,KAAC,WAAW,IACR,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,YAAY,EAAE,CAAC,EACf,IAAI,EAAE,UAAU,CAAC,cAAc,YAE9B,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,cAAiB,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAC9C,KAAC,KAAK,~~kBACF~~,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CACR,yBAAyB,EACzB,eAAe,CAClB,EACD,kBAAkB,EAAE,CAAC,CACjB,iCAAiC,CACpC,~~IACG~~,aAAa,CAAC,IAAI,CAAC,~~EACzB~~,IAXI,KAAK,CAYT,CACT,CAAC,GACQ,GACZ,CACT,CAAC,CAAC,CAAC,CACA,KAAC,KAAK,~~oBAAK~~,KAAK,~~IAAE~~,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,~~IAAI~~,CACrE,IACG,CACX,~~KACC~~,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,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"]}
1	+ {"version":3,"file":"FullscreenImage.js","sourceRoot":"../../../../src","sources":["components/FullscreenImage/FullscreenImage.tsx"],"names":[],"mappings":"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","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/esm/components/FullscreenMedia/FullscreenMedia.css CHANGED Viewed

@@ -29,9 +29,7 @@ unpredictable css rules order in build */
   max-width: min(65vw, 1232px);
   width: 100%;
   aspect-ratio: 16/9;
-  height: calc(
-                min(65vw, 1232px) * 9 / 16
-            ) !important; /* stylelint-disable-line declaration-no-important */
+  height: calc(min(65vw, 1232px) * 9 / 16) !important; /* stylelint-disable-line declaration-no-important */
 }
 .pc-full-screen-media__modal .g-modal__content, .pc-full-screen-media__modal-image {
   border-radius: var(--pc-border-radius);

package/build/esm/components/HTML/HTML.js CHANGED Viewed

@@ -1,11 +1,14 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { selectTagName } from "../../utils/index.js";
-const HTML = (_a) => {
-    var { content, children, block = false, className, contentClassName, qa, contentPosition = 'start', tagName = 'span', onlyContent = false } = _a, rest = __rest(_a, ["content", "children", "block", "className", "contentClassName", "qa", "contentPosition", "tagName", "onlyContent"]);
+const HTML = ({ content, children, block = false, className, contentClassName, qa, contentPosition = 'start', tagName = 'span', onlyContent = false, ...rest }) => {
     const renderedContent = React.useMemo(() => {
         return content
-            ? React.createElement(selectTagName({ content, block, tagName, children }), Object.assign({ dangerouslySetInnerHTML: { __html: content }, className: contentClassName, 'data-qa': qa }, rest))
+            ? React.createElement(selectTagName({ content, block, tagName, children }), {
+                dangerouslySetInnerHTML: { __html: content },
+                className: contentClassName,
+                'data-qa': qa,
+                ...rest,
+            })
             : null;
     }, [block, children, content, contentClassName, qa, rest, tagName]);
     if (onlyContent) {

package/build/esm/components/HTML/HTML.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,6BAAoB;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,~~cAVG~~,~~oHAWb~~,~~CADU~~;~~IAEP~~,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,OAAO;YACV,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,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,eAAe,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"]}
1	+ {"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,6BAAoB;AAmB1C,MAAM,IAAI,GAAG,CAAC,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,EACnB,GAAG,IAAI,EACC,EAAE,EAAE;IACZ,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,OAAO;YACV,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,CAAC,EAAE;gBACpE,uBAAuB,EAAE,EAAC,MAAM,EAAE,OAAO,EAAC;gBAC1C,SAAS,EAAE,gBAAgB;gBAC3B,SAAS,EAAE,EAAE;gBACb,GAAG,IAAI;aACV,CAAC;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,eAAe,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/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js CHANGED Viewed

@@ -12,6 +12,6 @@ export default function HeaderBreadcrumbs(props) {
     const onClick = React.useCallback(() => {
         handleAnalytics(analyticsEvents);
     }, [analyticsEvents, handleAnalytics]);
-    return (_jsx("nav", { className: b({ theme }, className), "aria-label": i18n('label'), children: _jsx("ol", { className: b('list'), children: items === null || items === void 0 ? void 0 : items.map(({ url, text }) => (_jsxs("li", { className: b('item'), children: [_jsx("a", { href: url, className: b('text'), onClick: onClick, children: text }), _jsx("span", { className: b('separator'), "aria-hidden": true, children: "/" })] }, url))) }) }));
+    return (_jsx("nav", { className: b({ theme }, className), "aria-label": i18n('label'), children: _jsx("ol", { className: b('list'), children: items?.map(({ url, text }) => (_jsxs("li", { className: b('item'), children: [_jsx("a", { href: url, className: b('text'), onClick: onClick, children: text }), _jsx("span", { className: b('separator'), "aria-hidden": true, children: "/" })] }, url))) }) }));
 }
 //# sourceMappingURL=HeaderBreadcrumbs.js.map

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBreadcrumbs.js","sourceRoot":"../../../../src","sources":["components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAAC,iBAAiB,EAAyB,8BAAqB;AACvE,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAElC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA6B;IACnE,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;IACnE,MAAM,eAAe,GAAG,YAAY,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,eAAe,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEvC,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,gBAAc,IAAI,CAAC,OAAO,CAAC,YAC5D,aAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACnB,KAAK,~~aAAL~~,~~KAAK,uBAAL,KAAK,CAAE,~~GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,CACzB,cAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACpB,YAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,YAC/C,IAAI,GACL,EACJ,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,uCAExB,KANoB,GAAG,CAO7B,CACR,CAAC,GACD,GACH,CACT,CAAC;AACN,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '../../hooks';\nimport {DefaultEventNames, HeaderBreadCrumbsProps} from '../../models';\nimport {block} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './HeaderBreadcrumbs.scss';\n\nconst b = block('header-breadcrumbs');\n\nexport default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {\n const {items, theme = 'light', className, analyticsEvents} = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.Breadcrumb);\n\n const onClick = React.useCallback(() => {\n handleAnalytics(analyticsEvents);\n }, [analyticsEvents, handleAnalytics]);\n\n return (\n <nav className={b({theme}, className)} aria-label={i18n('label')}>\n <ol className={b('list')}>\n {items?.map(({url, text}) => (\n <li className={b('item')} key={url}>\n <a href={url} className={b('text')} onClick={onClick}>\n {text}\n </a>\n <span className={b('separator')} aria-hidden>\n /\n </span>\n </li>\n ))}\n </ol>\n </nav>\n );\n}\n"]}
1	+ {"version":3,"file":"HeaderBreadcrumbs.js","sourceRoot":"../../../../src","sources":["components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAAC,iBAAiB,EAAyB,8BAAqB;AACvE,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAElC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA6B;IACnE,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;IACnE,MAAM,eAAe,GAAG,YAAY,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,eAAe,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEvC,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,gBAAc,IAAI,CAAC,OAAO,CAAC,YAC5D,aAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACnB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,CACzB,cAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACpB,YAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,YAC/C,IAAI,GACL,EACJ,eAAM,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,uCAExB,KANoB,GAAG,CAO7B,CACR,CAAC,GACD,GACH,CACT,CAAC;AACN,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '../../hooks';\nimport {DefaultEventNames, HeaderBreadCrumbsProps} from '../../models';\nimport {block} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './HeaderBreadcrumbs.scss';\n\nconst b = block('header-breadcrumbs');\n\nexport default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {\n const {items, theme = 'light', className, analyticsEvents} = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.Breadcrumb);\n\n const onClick = React.useCallback(() => {\n handleAnalytics(analyticsEvents);\n }, [analyticsEvents, handleAnalytics]);\n\n return (\n <nav className={b({theme}, className)} aria-label={i18n('label')}>\n <ol className={b('list')}>\n {items?.map(({url, text}) => (\n <li className={b('item')} key={url}>\n <a href={url} className={b('text')} onClick={onClick}>\n {text}\n </a>\n <span className={b('separator')} aria-hidden>\n /\n </span>\n </li>\n ))}\n </ol>\n </nav>\n );\n}\n"]}

package/build/esm/components/IconWrapper/IconWrapper.js CHANGED Viewed

@@ -11,8 +11,8 @@ const IconWrapper = (props) => {
         return _jsx(React.Fragment, { children: children });
     }
     const iconProps = getMediaImage(icon.value);
-    const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
-    return (_jsxs("div", { className: b({ ['icon-position']: iconPosition }, className), children: [iconProps && (_jsx(Image, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))), _jsx("div", { className: b('content', { ['icon-position']: iconPosition }), children: children })] }));
+    const iconPosition = icon?.position;
+    return (_jsxs("div", { className: b({ ['icon-position']: iconPosition }, className), children: [iconProps && (_jsx(Image, { ...iconProps, containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) })), _jsx("div", { className: b('content', { ['icon-position']: iconPosition }), children: children })] }));
 };
 export default IconWrapper;
 //# sourceMappingURL=IconWrapper.js.map

package/build/esm/components/IconWrapper/IconWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,KAAK,0BAAuB;AACnC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAEnD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,IAAI,~~aAAJ~~,~~IAAI,uBAAJ,IAAI,CAAE,~~QAAQ,CAAC;IAEpC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,EAAE,SAAS,CAAC,aAC1D,SAAS,IAAI,CACV,KAAC,KAAK,~~oBACE~~,SAAS,~~IACb~~,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,CAAC,~~IACzD~~,CACL,EACD,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,CAAC,YAAG,QAAQ,GAAO,IAC/E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport type {ClassNameProps, IconWrapperProps} from '../../models';\nimport {block} from '../../utils';\nimport Image from '../Image/Image';\nimport {getMediaImage} from '../Media/Image/utils';\n\nimport './IconWrapper.scss';\n\nconst b = block('icon-wrapper');\n\nconst IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {\n const {icon, children, className} = props;\n if (!icon) {\n return <React.Fragment>{children}</React.Fragment>;\n }\n\n const iconProps = getMediaImage(icon.value);\n const iconPosition = icon?.position;\n\n return (\n <div className={b({['icon-position']: iconPosition}, className)}>\n {iconProps && (\n <Image\n {...iconProps}\n containerClassName={b('icon-container')}\n className={b('icon', {['icon-position']: iconPosition})}\n />\n )}\n <div className={b('content', {['icon-position']: iconPosition})}>{children}</div>\n </div>\n );\n};\n\nexport default IconWrapper;\n"]}
1	+ {"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,KAAK,0BAAuB;AACnC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAEnD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,EAAE,SAAS,CAAC,aAC1D,SAAS,IAAI,CACV,KAAC,KAAK,OACE,SAAS,EACb,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,CAAC,GACzD,CACL,EACD,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,CAAC,YAAG,QAAQ,GAAO,IAC/E,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport type {ClassNameProps, IconWrapperProps} from '../../models';\nimport {block} from '../../utils';\nimport Image from '../Image/Image';\nimport {getMediaImage} from '../Media/Image/utils';\n\nimport './IconWrapper.scss';\n\nconst b = block('icon-wrapper');\n\nconst IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {\n const {icon, children, className} = props;\n if (!icon) {\n return <React.Fragment>{children}</React.Fragment>;\n }\n\n const iconProps = getMediaImage(icon.value);\n const iconPosition = icon?.position;\n\n return (\n <div className={b({['icon-position']: iconPosition}, className)}>\n {iconProps && (\n <Image\n {...iconProps}\n containerClassName={b('icon-container')}\n className={b('icon', {['icon-position']: iconPosition})}\n />\n )}\n <div className={b('content', {['icon-position']: iconPosition})}>{children}</div>\n </div>\n );\n};\n\nexport default IconWrapper;\n"]}

package/build/esm/components/Image/Image.d.ts CHANGED Viewed

@@ -10,7 +10,9 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    breakpoint: number;
+    maxBreakpoint?: number;
+    minBreakpoint?: number;
 }
-declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EMPTY_IMG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==";
+declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
 export default Image;

package/build/esm/components/Image/Image.js CHANGED Viewed

@@ -2,27 +2,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { BREAKPOINTS } from "../../constants.js";
 import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
+import { Device } from "../../models/index.js";
 import { getQaAttrubutes } from "../../utils/index.js";
 import { isCompressible } from "../../utils/imageCompress.js";
 import ImageBase from "../ImageBase/ImageBase.js";
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
-const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
+export const EMPTY_IMG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
+const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint, qa, }) => {
+    const media = [];
+    if (maxBreakpoint) {
+        media.push(`(max-width: ${maxBreakpoint}px)`);
+    }
+    if (minBreakpoint) {
+        media.push(`(min-width: ${minBreakpoint}px)`);
+    }
+    const mediaString = media.join(' and ');
+    return (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: mediaString, "data-qa": qa })] }));
+};
 const Image = (props) => {
     const projectSettings = React.useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, hide, } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
-    if (!src) {
-        return null;
-    }
-    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
-    const disableWebp = projectSettings.disableCompress ||
+    const hideDevices = typeof hide === 'boolean' || !hide
+        ? Object.values(Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
+        : hide;
+    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
+    const disableWebp = !src ||
+        projectSettings.disableCompress ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [mobile && (_jsx(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && (_jsx(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
+    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
 };
 export default Image;
 //# sourceMappingURL=Image.js.map

package/build/esm/components/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAC5C,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;~~AAE5E~~,OAAO,EAAC,eAAe,EAAC,6BAAoB;AAC5C,OAAO,EAAC,cAAc,EAAC,qCAAkC;AACzD,OAAO,SAAS,kCAA+B;~~AAgB~~/C,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,EAC5B,WAAW,EACX,GAAG,EACH,~~UAAU~~,~~EACV~~,EAAE,GACwB,EAAE,EAAE,CAAC,~~CAC/B~~,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,iBACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,~~eAAe~~,~~UAAU~~,~~KAAK,aAC5B,~~GAAG,EAAE,aAAa,GAC7B,CACL,EACD,iBAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,~~eAAe~~,~~UAAU,KAAK,~~aAAW,EAAE,GAAI,~~IAC9D~~,CACpB,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAChC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,EACF,GAAG,EAAE,QAAQ,EACb,GAAG,EACH,eAAe,EACf,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,EAAE,EACF,aAAa,EACb,OAAO,~~GACV~~,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,GAAG,GAAG,QAAQ,IAAI,OAAO,CAAC;IAEhC,IAAI,CAAC,GAAG,EAAE,CAAC~~;QACP~~,OAAO,IAAI,CAAC;~~IAChB~~,CAAC;~~IAED~~,MAAM,YAAY,GAAG,eAAe,CAChC,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,2BAA2B,CAC9B,CAAC;IAEF,MAAM,WAAW,GACb,eAAe,CAAC,eAAe;QAC/B,eAAe;QACf,CAAC,cAAc,CAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,OAAO,CACH,mBAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,MAAM,IAAI,~~CACP~~,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,~~EACX~~,WAAW,EAAE,WAAW,~~EACxB~~,~~UAAU~~,EAAE,WAAW,CAAC,EAAE,~~EAC1B~~,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,MAAM,IAAI,~~CACP~~,KAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,~~EACX~~,WAAW,EAAE,WAAW,~~EACxB~~,~~UAAU~~,EAAE,WAAW,CAAC,EAAE,~~EAC1B~~,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,GAAG,IAAI,CAAC,WAAW,IAAI,CACpB,iBACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,aACR,YAAY,CAAC,uBAAuB,GAC/C,CACL,EACD,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,MAAM,EAAE,MAAM,GAChB,IACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n ~~breakpoint:~~ number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n ~~breakpoint~~,\n qa,\n}: DeviceSpecificFragmentProps) => (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={~~`(max-width: ${breakpoint~~}~~px)`}~~\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={~~`(max-width: ${breakpoint~~}~~px)`}~~ data-qa={qa} />\n </React.Fragment>\n);\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc \|\| desktop;\n\n if (~~!src~~) {\n ~~return~~ ~~null~~;\n }\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n projectSettings.disableCompress \|\|\n disableCompress \|\|\n !isCompressible(src) \|\|\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {mobile && (\n <DeviceSpecificFragment\n src={mobile}\n disableWebp={disableWebp}\n ~~breakpoint~~={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {tablet && (\n <DeviceSpecificFragment\n src={tablet}\n disableWebp={disableWebp}\n ~~breakpoint~~={BREAKPOINTS.md}\n qa={qaAttributes.tabletSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}
1	+ {"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n maxBreakpoint?: number;\n minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n maxBreakpoint,\n minBreakpoint,\n qa,\n}: DeviceSpecificFragmentProps) => {\n const media: string[] = [];\n\n if (maxBreakpoint) {\n media.push(`(max-width: ${maxBreakpoint}px)`);\n }\n\n if (minBreakpoint) {\n media.push(`(min-width: ${minBreakpoint}px)`);\n }\n\n const mediaString = media.join(' and ');\n\n return (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={mediaString}\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={mediaString} data-qa={qa} />\n </React.Fragment>\n );\n};\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n hide,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc \|\| desktop;\n\n const hideDevices =\n typeof hide === 'boolean' \|\| !hide\n ? Object.values(Device).reduce(\n (acc, device) => ({...acc, [device]: Boolean(hide)}),\n {} as Record<Device, boolean>,\n )\n : hide;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n !src \|\|\n projectSettings.disableCompress \|\|\n disableCompress \|\|\n !isCompressible(src) \|\|\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {(mobile \|\| hideDevices.mobile) && (\n <DeviceSpecificFragment\n src={mobile \|\| EMPTY_IMG}\n disableWebp={disableWebp \|\| Boolean(hideDevices.mobile)}\n maxBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {(tablet \|\| hideDevices.tablet) && (\n <DeviceSpecificFragment\n src={tablet \|\| EMPTY_IMG}\n disableWebp={disableWebp \|\| Boolean(hideDevices.tablet)}\n maxBreakpoint={BREAKPOINTS.md}\n minBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.tabletSource}\n />\n )}\n {hideDevices.desktop && (\n <DeviceSpecificFragment\n src={EMPTY_IMG}\n disableWebp\n minBreakpoint={BREAKPOINTS.md}\n qa={qaAttributes.desktopSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}

package/build/esm/components/Image/schema.d.ts CHANGED Viewed

@@ -31,6 +31,25 @@ export declare const ImageDeviceProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageBaseObjectProps: {
@@ -75,6 +94,25 @@ export declare const ImageBaseObjectProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageObjectProps: {
@@ -120,6 +158,25 @@ export declare const ImageObjectProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageProps: {
@@ -193,6 +250,25 @@ export declare const BackgroundImageProps: {
                 type: string;
                 enum: string[];
             };
+            hide: {
+                oneOf: ({
+                    type: string;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    properties: {
+                        mobile: {
+                            type: string;
+                        };
+                        tablet: {
+                            type: string;
+                        };
+                        desktop: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
         };
     } | {
         optionName: string;
@@ -227,6 +303,25 @@ export declare const BackgroundImageProps: {
                 type: string;
                 enum: string[];
             };
+            hide: {
+                oneOf: ({
+                    type: string;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    properties: {
+                        mobile: {
+                            type: string;
+                        };
+                        tablet: {
+                            type: string;
+                        };
+                        desktop: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
         };
     })[];
 };

package/build/esm/components/Image/schema.js CHANGED Viewed

@@ -16,6 +16,21 @@ const ImageBase = {
         type: 'string',
         enum: ['high', 'low', 'auto'],
     },
+    hide: {
+        oneOf: [
+            {
+                type: 'boolean',
+            },
+            {
+                type: 'object',
+                properties: {
+                    mobile: { type: 'boolean' },
+                    tablet: { type: 'boolean' },
+                    desktop: { type: 'boolean' },
+                },
+            },
+        ],
+    },
 };
 const StyleBase = {
     type: 'object',
@@ -32,23 +47,35 @@ export const ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
     required: ['desktop', 'mobile'],
-    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: imageUrlPattern }, tablet: {
+    properties: {
+        ...ImageBase,
+        desktop: { type: 'string', pattern: imageUrlPattern },
+        tablet: {
             type: 'string',
             pattern: imageUrlPattern,
-        }, mobile: {
+        },
+        mobile: {
             type: 'string',
             pattern: imageUrlPattern,
-        } }),
+        },
+    },
 };
 export const ImageBaseObjectProps = {
     type: 'object',
     additionalProperties: false,
-    properties: Object.assign(Object.assign({}, ImageBase), { src: {
+    properties: {
+        ...ImageBase,
+        src: {
             type: 'string',
             pattern: imageUrlPattern,
-        }, style: StyleBase }),
+        },
+        style: StyleBase,
+    },
+};
+export const ImageObjectProps = {
+    ...ImageBaseObjectProps,
+    required: ['src'],
 };
-export const ImageObjectProps = Object.assign(Object.assign({}, ImageBaseObjectProps), { required: ['src'] });
 export const ImageProps = {
     oneOf: [
         {
@@ -56,24 +83,40 @@ export const ImageProps = {
             pattern: imageUrlPattern,
             optionName: 'url',
         },
-        filteredItem(Object.assign(Object.assign({}, ImageObjectProps), { optionName: 'options' })),
-        filteredItem(Object.assign(Object.assign({}, ImageDeviceProps), { optionName: 'device options' })),
+        filteredItem({
+            ...ImageObjectProps,
+            optionName: 'options',
+        }),
+        filteredItem({
+            ...ImageDeviceProps,
+            optionName: 'device options',
+        }),
         {
             type: 'array',
-            items: filteredItem(Object.assign({}, ImageObjectProps)),
+            items: filteredItem({
+                ...ImageObjectProps,
+            }),
             optionName: 'options list',
         },
         {
             type: 'array',
-            items: filteredItem(Object.assign({}, ImageDeviceProps)),
+            items: filteredItem({
+                ...ImageDeviceProps,
+            }),
             optionName: 'device options list',
         },
     ],
 };
 export const BackgroundImageProps = {
     anyOf: [
-        Object.assign(Object.assign({}, ImageBaseObjectProps), { optionName: 'options' }),
-        Object.assign(Object.assign({}, ImageDeviceProps), { optionName: 'device options' }),
+        {
+            ...ImageBaseObjectProps,
+            optionName: 'options',
+        },
+        {
+            ...ImageDeviceProps,
+            optionName: 'device options',
+        },
     ],
 };
 //# sourceMappingURL=schema.js.map