@gravity-ui/page-constructor 5.33.3 → 5.33.4-beta.0

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

@@ -1,13 +1,13 @@
-import { CSSProperties, Component, PropsWithChildren } from 'react';
-import { ClassNameProps } from '../../models';
+import * as React from 'react';
+import { ClassNameProps } from "../../models/index.js";
 export interface FullWidthBackgroundProps extends ClassNameProps {
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     theme?: 'default' | 'rounded';
 }
-export default class FullWidthBackground extends Component<PropsWithChildren<FullWidthBackgroundProps>> {
+export default class FullWidthBackground extends React.Component<React.PropsWithChildren<FullWidthBackgroundProps>> {
     private ref;
     private setBg;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+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 constants_1 = require("../../constants");
-const utils_1 = require("../../utils");
+const constants_1 = require("../../constants.js");
+const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('FullWidthBackground');
 function getPadding(width) {
     return width > constants_1.BREAKPOINTS.sm ? 16 : 8;
 }
-class FullWidthBackground extends react_1.Component {
+class FullWidthBackground extends React.Component {
     constructor() {
         super(...arguments);
-        this.ref = (0, react_1.createRef)();
+        this.ref = React.createRef();
         this.setBg = (0, debounce_1.default)(() => {
             var _a, _b;
             if (this.ref && this.ref.current) {
@@ -38,7 +39,8 @@ class FullWidthBackground extends react_1.Component {
     }
     render() {
         const { children, className, style, theme = 'default' } = this.props;
-        return (react_1.default.createElement("div", { className: b({ [theme]: true }, className), ref: this.ref, style: style }, children));
+        return ((0, jsx_runtime_1.jsx)("div", { className: b({ [theme]: true }, className), ref: this.ref, style: style, children: children }));
     }
 }
 exports.default = FullWidthBackground;
+//# sourceMappingURL=FullWidthBackground.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -1,28 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+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 utils_1 = require("../../utils");
-const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
-const i18n_1 = require("./i18n");
+const utils_1 = require("../../utils/index.js");
+const Image_1 = tslib_1.__importDefault(require("../Image/Image.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 [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [isOpened, setIsOpened] = React.useState(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    return (react_1.default.createElement("div", Object.assign({ className: b() }, extraProps),
-        react_1.default.createElement("div", { className: b('image-wrapper') },
-            react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
-            react_1.default.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
-        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
-            react_1.default.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
-            react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))))));
+    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) }))] }))] })));
 };
 exports.default = FullscreenImage;
+//# sourceMappingURL=FullscreenImage.js.map

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

@@ -0,0 +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"]}

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "close" | "img-alt", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "close" | "img-alt", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "pc-FullscreenImage": Record<"close" | "img-alt", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
 const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
-const cn_1 = require("../../../utils/cn");
+const cn_1 = require("../../../utils/cn.js");
 const en_json_1 = tslib_1.__importDefault(require("./en.json"));
 const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}FullscreenImage`);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/FullscreenImage/i18n/index.ts"],"names":[],"mappings":";;;;AAAA,iDAA2D;AAE3D,6CAA4C;AAE5C,gEAA2B;AAC3B,gEAA2B;AAEd,QAAA,IAAI,GAAG,IAAA,0BAAmB,EAAC,EAAC,EAAE,EAAF,iBAAE,EAAE,EAAE,EAAF,iBAAE,EAAC,EAAE,GAAG,cAAS,iBAAiB,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}FullscreenImage`);\n"]}

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { MediaAllProps } from '../Media/Media';
+import { MediaAllProps } from "../Media/Media.js";
 export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className' | 'previewImg' | 'autoplay'>;
 export interface FullscreenMediaProps {
     showFullscreenIcon?: boolean;

package/build/cjs/components/FullscreenMedia/FullscreenMedia.js

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+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 mobileContext_1 = require("../../context/mobileContext");
-const utils_1 = require("../../utils");
+const mobileContext_1 = require("../../context/mobileContext/index.js");
+const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 const getMediaClass = (type) => b('modal-media', { type });
 const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
-    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const [isOpened, setIsOpened] = React.useState(false);
+    const isMobile = React.useContext(mobileContext_1.MobileContext);
     const openModal = (e) => {
         e.stopPropagation();
         setIsOpened(true);
@@ -21,21 +22,14 @@ const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
     if (isMobile) {
         return children();
     }
-    return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
-            children({ className: b('inline-media') }),
-            showFullscreenIcon && (react_1.default.createElement(uikit_1.Button, { className: b('icon-wrapper'), extraProps: { onClickCapture: openModal }, size: 'l' },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
-        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
-            react_1.default.createElement(uikit_1.Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l' },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
-            children({
-                imageClassName: getMediaClass('image'),
-                videoClassName: getMediaClass('video'),
-                youtubeClassName: getMediaClass('youtube'),
-                fullscreen: true,
-                previewImg: undefined,
-                autoplay: true,
-            })))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('media-wrapper'), onClickCapture: openModal, children: [children({ className: b('inline-media') }), showFullscreenIcon && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('icon-wrapper'), extraProps: { onClickCapture: openModal }, size: 'l', 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)(uikit_1.Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l', 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 }) }) }), children({
+                        imageClassName: getMediaClass('image'),
+                        videoClassName: getMediaClass('video'),
+                        youtubeClassName: getMediaClass('youtube'),
+                        fullscreen: true,
+                        previewImg: undefined,
+                        autoplay: true,
+                    })] }))] }));
 };
 exports.default = FullscreenMedia;
+//# sourceMappingURL=FullscreenMedia.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenMedia.js","sourceRoot":"../../../../src","sources":["components/FullscreenMedia/FullscreenMedia.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA+D;AAC/D,6CAAsD;AAEtD,wEAA0D;AAC1D,gDAAkC;AAqBlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,mBAAmB,CAAC,CAAC;AACrC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,EAAC,IAAI,EAAC,CAAC,CAAC;AAEjE,MAAM,eAAe,GAAG,CAAC,EAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAuB,EAAE,EAAE;IACpF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAEjD,MAAM,SAAS,GAAG,CAAC,CAAmB,EAAE,EAAE;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5C,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,QAAQ,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,EAAE,aACf,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,cAAc,EAAE,SAAS,aACxD,QAAQ,CAAC,EAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAC,CAAC,EACxC,kBAAkB,IAAI,CACnB,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,UAAU,EAAE,EAAC,cAAc,EAAE,SAAS,EAAC,EACvC,IAAI,EAAE,GAAG,YAET,uBAAC,YAAI,IACD,IAAI,EAAE,6BAAqB,EAC3B,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,qBAAqB,EAC7B,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACG,CACZ,IACC,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,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAC7C,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,GAAG,YAET,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,QAAQ,CAAC;wBACN,cAAc,EAAE,aAAa,CAAC,OAAO,CAAC;wBACtC,cAAc,EAAE,aAAa,CAAC,OAAO,CAAC;wBACtC,gBAAgB,EAAE,aAAa,CAAC,SAAS,CAAC;wBAC1C,UAAU,EAAE,IAAI;wBAChB,UAAU,EAAE,SAAS;wBACrB,QAAQ,EAAE,IAAI;qBACjB,CAAC,IACE,CACX,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Modal} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../context/mobileContext';\nimport {block} from '../../utils';\nimport {MediaAllProps} from '../Media/Media';\n\nimport './FullscreenMedia.scss';\n\nexport type ChildMediaRenderProps = Pick<\n    MediaAllProps,\n    | 'fullscreen'\n    | 'imageClassName'\n    | 'videoClassName'\n    | 'youtubeClassName'\n    | 'className'\n    | 'previewImg'\n    | 'autoplay'\n>;\n\nexport interface FullscreenMediaProps {\n    showFullscreenIcon?: boolean;\n    children: (props?: ChildMediaRenderProps) => JSX.Element;\n}\n\nconst b = block('full-screen-media');\nconst FULL_SCREEN_ICON_SIZE = 18;\nconst CLOSE_ICON_SIZE = 24;\n\nconst getMediaClass = (type: string) => b('modal-media', {type});\n\nconst FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaProps) => {\n    const [isOpened, setIsOpened] = React.useState(false);\n    const isMobile = React.useContext(MobileContext);\n\n    const openModal = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        setIsOpened(true);\n    };\n    const closeModal = () => setIsOpened(false);\n\n    if (isMobile) {\n        return children();\n    }\n\n    return (\n        <div className={b()}>\n            <div className={b('media-wrapper')} onClickCapture={openModal}>\n                {children({className: b('inline-media')})}\n                {showFullscreenIcon && (\n                    <Button\n                        className={b('icon-wrapper')}\n                        extraProps={{onClickCapture: openModal}}\n                        size={'l'}\n                    >\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                )}\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                        size={'l'}\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                    {children({\n                        imageClassName: getMediaClass('image'),\n                        videoClassName: getMediaClass('video'),\n                        youtubeClassName: getMediaClass('youtube'),\n                        fullscreen: true,\n                        previewImg: undefined,\n                        autoplay: true,\n                    })}\n                </Modal>\n            )}\n        </div>\n    );\n};\n\nexport default FullscreenMedia;\n"]}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { QAProps } from '../../models/common';
+import * as React from 'react';
+import { QAProps } from "../../models/common.js";
 export interface HTMLProps {
     children?: string;
     block?: boolean;
@@ -9,7 +9,7 @@ export interface HTMLProps {
 }
 declare const HTML: ({ children, block, className, itemProp, id, qa, }: React.PropsWithChildren<HTMLProps & QAProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
-        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
+        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & Iterable<React.ReactNode>) | (string & React.ReactPortal);
     };
     className: string | undefined;
     itemProp: string | undefined;

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const utils_1 = require("../../utils");
+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;
     }
-    return react_1.default.createElement(block || (0, utils_1.hasBlockTag)(children) ? 'div' : 'span', {
+    return React.createElement(block || (0, utils_1.hasBlockTag)(children) ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
         itemProp,
@@ -16,3 +16,4 @@ const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
     });
 };
 exports.default = HTML;
+//# sourceMappingURL=HTML.js.map

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

@@ -0,0 +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"]}

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { HeaderBreadCrumbsProps } from '../../models';
-export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps): JSX.Element;
+import { HeaderBreadCrumbsProps } from "../../models/index.js";
+export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps): import("react/jsx-runtime").JSX.Element;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -1,21 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HeaderBreadcrumbs;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const hooks_1 = require("../../hooks");
-const models_1 = require("../../models");
-const utils_1 = require("../../utils");
-const i18n_1 = require("./i18n");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../hooks/index.js");
+const models_1 = require("../../models/index.js");
+const utils_1 = require("../../utils/index.js");
+const i18n_1 = require("./i18n/index.js");
 const b = (0, utils_1.block)('header-breadcrumbs');
 function HeaderBreadcrumbs(props) {
     const { items, theme = 'light', className, analyticsEvents } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Breadcrumb);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = React.useCallback(() => {
         handleAnalytics(analyticsEvents);
     }, [analyticsEvents, handleAnalytics]);
-    return (react_1.default.createElement("nav", { className: b({ theme }, className), "aria-label": (0, i18n_1.i18n)('label') },
-        react_1.default.createElement("ol", { className: b('list') }, items === null || items === void 0 ? void 0 : items.map(({ url, text }) => (react_1.default.createElement("li", { className: b('item'), key: url },
-            react_1.default.createElement("a", { href: url, className: b('text'), onClick: onClick }, text),
-            react_1.default.createElement("span", { className: b('separator'), "aria-hidden": true }, "/")))))));
+    return ((0, jsx_runtime_1.jsx)("nav", { className: b({ theme }, className), "aria-label": (0, i18n_1.i18n)('label'), children: (0, jsx_runtime_1.jsx)("ol", { className: b('list'), children: items === null || items === void 0 ? void 0 : items.map(({ url, text }) => ((0, jsx_runtime_1.jsxs)("li", { className: b('item'), children: [(0, jsx_runtime_1.jsx)("a", { href: url, className: b('text'), onClick: onClick, children: text }), (0, jsx_runtime_1.jsx)("span", { className: b('separator'), "aria-hidden": true, children: "/" })] }, url))) }) }));
 }
-exports.default = HeaderBreadcrumbs;
+//# sourceMappingURL=HeaderBreadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBreadcrumbs.js","sourceRoot":"../../../../src","sources":["components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx"],"names":[],"mappings":";;AAYA,oCAwBC;;;AApCD,qDAA+B;AAE/B,gDAAyC;AACzC,kDAAuE;AACvE,gDAAkC;AAElC,0CAA4B;AAI5B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,oBAAoB,CAAC,CAAC;AAEtC,SAAwB,iBAAiB,CAAC,KAA6B;IACnE,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;IACnE,MAAM,eAAe,GAAG,IAAA,oBAAY,EAAC,0BAAiB,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,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,gBAAc,IAAA,WAAI,EAAC,OAAO,CAAC,YAC5D,+BAAI,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,gCAAI,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACpB,8BAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,YAC/C,IAAI,GACL,EACJ,iCAAM,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/cjs/components/HeaderBreadcrumbs/i18n/index.d.ts

@@ -1 +1,5 @@
-export declare const i18n: (key: "label", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "label", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "pc-HeaderBreadcrumbs": Record<"label", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/build/cjs/components/HeaderBreadcrumbs/i18n/index.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
 const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
-const cn_1 = require("../../../utils/cn");
+const cn_1 = require("../../../utils/cn.js");
 const en_json_1 = tslib_1.__importDefault(require("./en.json"));
 const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}HeaderBreadcrumbs`);
+//# sourceMappingURL=index.js.map

package/build/cjs/components/HeaderBreadcrumbs/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/HeaderBreadcrumbs/i18n/index.ts"],"names":[],"mappings":";;;;AAAA,iDAA2D;AAE3D,6CAA4C;AAE5C,gEAA2B;AAC3B,gEAA2B;AAEd,QAAA,IAAI,GAAG,IAAA,0BAAmB,EAAC,EAAC,EAAE,EAAF,iBAAE,EAAE,EAAE,EAAF,iBAAE,EAAC,EAAE,GAAG,cAAS,mBAAmB,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}HeaderBreadcrumbs`);\n"]}

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
-import type { ClassNameProps, IconWrapperProps } from '../../models';
-declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps> & ClassNameProps) => JSX.Element;
+import * as React from 'react';
+import type { ClassNameProps, IconWrapperProps } from "../../models/index.js";
+declare const IconWrapper: (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => import("react/jsx-runtime").JSX.Element;
 export default IconWrapper;

package/build/cjs/components/IconWrapper/IconWrapper.js

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../utils");
-const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
-const utils_2 = require("../Media/Image/utils");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+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 b = (0, utils_1.block)('icon-wrapper');
 const IconWrapper = (props) => {
     const { icon, children, className } = props;
     if (!icon) {
-        return react_1.default.createElement(react_1.Fragment, null, children);
+        return (0, jsx_runtime_1.jsx)(React.Fragment, { children: children });
     }
     const iconProps = (0, utils_2.getMediaImage)(icon.value);
     const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
-    return (react_1.default.createElement("div", { className: b({ ['icon-position']: iconPosition }, className) },
-        iconProps && (react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))),
-        react_1.default.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) }, children)));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ ['icon-position']: iconPosition }, className), children: [iconProps && ((0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))), (0, jsx_runtime_1.jsx)("div", { className: b('content', { ['icon-position']: iconPosition }), children: children })] }));
 };
 exports.default = IconWrapper;
+//# sourceMappingURL=IconWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.js","sourceRoot":"../../../../src","sources":["components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAG/B,gDAAkC;AAClC,sEAAmC;AACnC,mDAAmD;AAInD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,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,uBAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC;IAEpC,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,YAAY,EAAC,EAAE,SAAS,CAAC,aAC1D,SAAS,IAAI,CACV,uBAAC,eAAK,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,gCAAK,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,kBAAe,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/cjs/components/Image/Image.d.ts

@@ -1,10 +1,10 @@
-import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
-import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
+import * as React from 'react';
+import { ImageDeviceProps, ImageObjectProps, QAProps } from "../../models/index.js";
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     className?: string;
-    onClick?: MouseEventHandler;
-    onLoad?: ReactEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler;
+    onLoad?: React.ReactEventHandler<HTMLDivElement>;
     containerClassName?: string;
 }
 export interface DeviceSpecificFragmentProps extends QAProps {
@@ -12,5 +12,5 @@ export interface DeviceSpecificFragmentProps extends QAProps {
     src: string;
     breakpoint: number;
 }
-declare const Image: (props: ImageProps) => JSX.Element | null;
+declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Image;

package/build/cjs/components/Image/Image.js

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const constants_1 = require("../../constants");
-const projectSettingsContext_1 = require("../../context/projectSettingsContext");
-const utils_1 = require("../../utils");
-const imageCompress_1 = require("../../utils/imageCompress");
-const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("../../constants.js");
+const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
+const utils_1 = require("../../utils/index.js");
+const imageCompress_1 = require("../../utils/imageCompress.js");
+const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase.js"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
-const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (react_1.default.createElement(react_1.Fragment, null,
-    !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })),
-    react_1.default.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
+const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
 const Image = (props) => {
-    const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
+    const projectSettings = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
     const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
-    const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
+    const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
     if (!src) {
         return null;
@@ -26,10 +25,7 @@ const Image = (props) => {
         disableCompress ||
         !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
-    return (react_1.default.createElement("picture", { className: containerClassName, "data-qa": qa },
-        mobile && (react_1.default.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
-        tablet && (react_1.default.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
-        src && !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
-        react_1.default.createElement(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
+    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [mobile && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
 };
 exports.default = Image;
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,kDAA4C;AAC5C,0FAA4E;AAE5E,gDAA4C;AAC5C,gEAAyD;AACzD,kFAA+C;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,wBAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,mCACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,eAAe,UAAU,KAAK,aAC5B,GAAG,EAAE,aAAa,GAC7B,CACL,EACD,mCAAQ,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,+CAAsB,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,IAAA,uBAAe,EAChC,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,IAAA,8BAAc,EAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,OAAO,CACH,qCAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,MAAM,IAAI,CACP,uBAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,uBAAW,CAAC,EAAE,EAC1B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,MAAM,IAAI,CACP,uBAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,uBAAW,CAAC,EAAE,EAC1B,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,GAAG,IAAI,CAAC,WAAW,IAAI,CACpB,mCACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,aACR,YAAY,CAAC,uBAAuB,GAC/C,CACL,EACD,uBAAC,mBAAS,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,kBAAe,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"]}

package/build/cjs/components/Image/schema.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundImageProps = exports.ImageProps = exports.ImageObjectProps = exports.ImageBaseObjectProps = exports.ImageDeviceProps = exports.imageUrlPattern = void 0;
-const utils_1 = require("../../schema/validators/utils");
+const utils_1 = require("../../schema/validators/utils.js");
 exports.imageUrlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 const ImageBase = {
     alt: {
@@ -79,3 +79,4 @@ exports.BackgroundImageProps = {
         Object.assign(Object.assign({}, exports.ImageDeviceProps), { optionName: 'device options' }),
     ],
 };
+//# sourceMappingURL=schema.js.map

package/build/cjs/components/Image/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["components/Image/schema.ts"],"names":[],"mappings":";;;AAAA,4DAA2D;AAE9C,QAAA,eAAe,GACxB,kGAAkG,CAAC;AAEvG,MAAM,SAAS,GAAG;IACd,GAAG,EAAE;QACD,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,MAAM;KACtB;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B;IACD,aAAa,EAAE;QACX,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;KAChC;CACJ,CAAC;AAEF,MAAM,SAAS,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACR,eAAe,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;QACjC,MAAM,EAAE,EAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAC;QACpC,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAC;QACnC,KAAK,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;KAC1B;CACJ,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC5B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC/B,UAAU,kCACH,SAAS,KACZ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,uBAAe,EAAC,EACnD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B,EACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B,GACJ;CACJ,CAAC;AAEW,QAAA,oBAAoB,GAAG;IAChC,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,UAAU,kCACH,SAAS,KACZ,GAAG,EAAE;YACD,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B,EACD,KAAK,EAAE,SAAS,GACnB;CACJ,CAAC;AAEW,QAAA,gBAAgB,mCACtB,4BAAoB,KACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,IACnB;AAEW,QAAA,UAAU,GAAG;IACtB,KAAK,EAAE;QACH;YACI,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;YACxB,UAAU,EAAE,KAAK;SACpB;QACD,IAAA,oBAAY,kCACL,wBAAgB,KACnB,UAAU,EAAE,SAAS,IACvB;QACF,IAAA,oBAAY,kCACL,wBAAgB,KACnB,UAAU,EAAE,gBAAgB,IAC9B;QACF;YACI,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAA,oBAAY,oBACZ,wBAAgB,EACrB;YACF,UAAU,EAAE,cAAc;SAC7B;QACD;YACI,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAA,oBAAY,oBACZ,wBAAgB,EACrB;YACF,UAAU,EAAE,qBAAqB;SACpC;KACJ;CACJ,CAAC;AAEW,QAAA,oBAAoB,GAAG;IAChC,KAAK,EAAE;wCAEI,4BAAoB,KACvB,UAAU,EAAE,SAAS;wCAGlB,wBAAgB,KACnB,UAAU,EAAE,gBAAgB;KAEnC;CACJ,CAAC","sourcesContent":["import {filteredItem} from '../../schema/validators/utils';\n\nexport const imageUrlPattern =\n    '^((http[s]?|ftp):\\\\/)?\\\\/?([^:\\\\/\\\\s]+)((\\\\/\\\\w+)*\\\\/)([\\\\w\\\\-\\\\.]+[^#?\\\\s]+)(.*)?(#[\\\\w\\\\-]+)?$';\n\nconst ImageBase = {\n    alt: {\n        type: 'string',\n        contentType: 'text',\n    },\n    disableCompress: {\n        type: 'boolean',\n    },\n    loading: {\n        type: 'string',\n        enum: ['eager', 'lazy'],\n    },\n    fetchPriority: {\n        type: 'string',\n        enum: ['high', 'low', 'auto'],\n    },\n};\n\nconst StyleBase = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        backgroundColor: {type: 'string'},\n        height: {type: ['string', 'number']},\n        width: {type: ['string', 'number']},\n        color: {type: 'string'},\n    },\n};\n\nexport const ImageDeviceProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['desktop', 'mobile'],\n    properties: {\n        ...ImageBase,\n        desktop: {type: 'string', pattern: imageUrlPattern},\n        tablet: {\n            type: 'string',\n            pattern: imageUrlPattern,\n        },\n        mobile: {\n            type: 'string',\n            pattern: imageUrlPattern,\n        },\n    },\n};\n\nexport const ImageBaseObjectProps = {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n        ...ImageBase,\n        src: {\n            type: 'string',\n            pattern: imageUrlPattern,\n        },\n        style: StyleBase,\n    },\n};\n\nexport const ImageObjectProps = {\n    ...ImageBaseObjectProps,\n    required: ['src'],\n};\n\nexport const ImageProps = {\n    oneOf: [\n        {\n            type: 'string',\n            pattern: imageUrlPattern,\n            optionName: 'url',\n        },\n        filteredItem({\n            ...ImageObjectProps,\n            optionName: 'options',\n        }),\n        filteredItem({\n            ...ImageDeviceProps,\n            optionName: 'device options',\n        }),\n        {\n            type: 'array',\n            items: filteredItem({\n                ...ImageObjectProps,\n            }),\n            optionName: 'options list',\n        },\n        {\n            type: 'array',\n            items: filteredItem({\n                ...ImageDeviceProps,\n            }),\n            optionName: 'device options list',\n        },\n    ],\n};\n\nexport const BackgroundImageProps = {\n    anyOf: [\n        {\n            ...ImageBaseObjectProps,\n            optionName: 'options',\n        },\n        {\n            ...ImageDeviceProps,\n            optionName: 'device options',\n        },\n    ],\n};\n"]}

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

@@ -1,11 +1,11 @@
-import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
-import { ImageObjectProps } from '../../models';
+import * as React from 'react';
+import { ImageObjectProps } from "../../models/index.js";
 export interface ImageBaseProps extends Partial<ImageObjectProps> {
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     className?: string;
-    onClick?: MouseEventHandler;
-    onLoad?: ReactEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler;
+    onLoad?: React.ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
-export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => JSX.Element;
+export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageBase;

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

@@ -2,17 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageBase = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const imageContext_1 = require("../../context/imageContext/imageContext");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const imageContext_1 = require("../../context/imageContext/imageContext.js");
 const ImageBase = (_a) => {
     var { fetchPriority, alt } = _a, props = tslib_1.__rest(_a, ["fetchPriority", "alt"]);
-    const { Image } = react_1.default.useContext(imageContext_1.ImageContext);
-    return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
+    const { Image } = React.useContext(imageContext_1.ImageContext);
+    return Image ? ((0, jsx_runtime_1.jsx)(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
     // There is an issue with fetchpriority attr in img in React.
     // 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.
-    react_1.default.createElement("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;
+//# sourceMappingURL=ImageBase.js.map

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

@@ -0,0 +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"]}