@gravity-ui/page-constructor 8.0.0-beta.2 → 8.1.0

package/build/esm/components/Buttons/Buttons.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ButtonProps, ContentSize } from "../../models/index.js";
 import './Buttons.css';
 type ButtonsProps = {
@@ -9,5 +8,5 @@ type ButtonsProps = {
     qa?: string;
     buttonQa?: string;
 };
-declare const Buttons: React.FC<ButtonsProps>;
+declare const Buttons: ({ className, titleId, buttons, size, qa, buttonQa }: ButtonsProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Buttons;

package/build/esm/components/Buttons/Buttons.js

@@ -13,7 +13,7 @@ function getButtonSize(size) {
             return 'xl';
     }
 }
-const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa, }) => buttons ? (_jsx("div", { className: b({ size }, className), "data-qa": qa, children: buttons.map((item) => (_createElement(Button, { className: b('button'), ...item, key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: {
+const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa }) => buttons ? (_jsx("div", { className: b({ size }, className), "data-qa": qa, children: buttons.map((item) => (_createElement(Button, { className: b('button'), ...item, key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: {
             'aria-describedby': item.urlTitle ? undefined : titleId,
             ...item.extraProps,
         } }))) })) : null;

package/build/esm/components/Buttons/Buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.js","sourceRoot":"../../../../src","sources":["components/Buttons/Buttons.tsx"],"names":[],"mappings":";;AAGA,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,MAAM,4BAAyB;AAEtC,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAW3B,SAAS,aAAa,CAAC,IAAiB;IACpC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,OAAO,GAA2B,CAAC,EACrC,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,GAAG,GAAG,EACV,EAAE,EACF,QAAQ,GACX,EAAE,EAAE,CACD,OAAO,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,aAAW,EAAE,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,KAClB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,EACzB,EAAE,EAAE,QAAQ,EACZ,UAAU,EAAE;YACR,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YACvD,GAAG,IAAI,CAAC,UAAU;SACrB,GACH,CACL,CAAC,GACA,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,eAAe,OAAO,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonProps, ContentSize} from '../../models';\nimport {block} from '../../utils';\nimport Button from '../Button/Button';\n\nimport './Buttons.scss';\n\nconst b = block('buttons');\n\ntype ButtonsProps = {\n    className?: string;\n    buttons?: ButtonProps[];\n    size?: ContentSize;\n    titleId?: string;\n    qa?: string;\n    buttonQa?: string;\n};\n\nfunction getButtonSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'm';\n        case 'l':\n        default:\n            return 'xl';\n    }\n}\n\nconst Buttons: React.FC<ButtonsProps> = ({\n    className,\n    titleId,\n    buttons,\n    size = 's',\n    qa,\n    buttonQa,\n}) =>\n    buttons ? (\n        <div className={b({size}, className)} data-qa={qa}>\n            {buttons.map((item) => (\n                <Button\n                    className={b('button')}\n                    {...item}\n                    key={item.url}\n                    size={getButtonSize(size)}\n                    qa={buttonQa}\n                    extraProps={{\n                        'aria-describedby': item.urlTitle ? undefined : titleId,\n                        ...item.extraProps,\n                    }}\n                />\n            ))}\n        </div>\n    ) : null;\n\nexport default Buttons;\n"]}
+{"version":3,"file":"Buttons.js","sourceRoot":"../../../../src","sources":["components/Buttons/Buttons.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,MAAM,4BAAyB;AAEtC,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAW3B,SAAS,aAAa,CAAC,IAAiB;IACpC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAe,EAAE,EAAE,CACtF,OAAO,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,aAAW,EAAE,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,KAClB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,EACzB,EAAE,EAAE,QAAQ,EACZ,UAAU,EAAE;YACR,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YACvD,GAAG,IAAI,CAAC,UAAU;SACrB,GACH,CACL,CAAC,GACA,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,eAAe,OAAO,CAAC","sourcesContent":["import {ButtonProps, ContentSize} from '../../models';\nimport {block} from '../../utils';\nimport Button from '../Button/Button';\n\nimport './Buttons.scss';\n\nconst b = block('buttons');\n\ntype ButtonsProps = {\n    className?: string;\n    buttons?: ButtonProps[];\n    size?: ContentSize;\n    titleId?: string;\n    qa?: string;\n    buttonQa?: string;\n};\n\nfunction getButtonSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'm';\n        case 'l':\n        default:\n            return 'xl';\n    }\n}\n\nconst Buttons = ({className, titleId, buttons, size = 's', qa, buttonQa}: ButtonsProps) =>\n    buttons ? (\n        <div className={b({size}, className)} data-qa={qa}>\n            {buttons.map((item) => (\n                <Button\n                    className={b('button')}\n                    {...item}\n                    key={item.url}\n                    size={getButtonSize(size)}\n                    qa={buttonQa}\n                    extraProps={{\n                        'aria-describedby': item.urlTitle ? undefined : titleId,\n                        ...item.extraProps,\n                    }}\n                />\n            ))}\n        </div>\n    ) : null;\n\nexport default Buttons;\n"]}

package/build/esm/components/CardBase/CardBase.css

@@ -72,6 +72,8 @@ a.pc-card-base-block {
   border-radius: var(--pc-border-radius);
   background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  position: relative;
+  overflow: hidden;
 }
 a.pc-card-base-block:hover, a.pc-card-base-block:active {
   --pc-text-header-color: inherit;
@@ -94,4 +96,17 @@ a.pc-card-base-block_border_shadow:hover {
 }
 a.pc-card-base-block_border_shadow:hover {
   background-color: var(--pc-color-base-float-hover);
+}
+a.pc-card-base-block::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hover-background-color);
+  opacity: 0;
+  transition: opacity 240ms ease-in;
+  pointer-events: none;
+  z-index: -1;
+}
+a.pc-card-base-block:hover::before {
+  opacity: 1;
 }

package/build/esm/components/CardBase/CardBase.d.ts

@@ -21,10 +21,8 @@ export interface CardFooterBaseProps {
 }
 export declare const Layout: {
     (props: CardBasePropsType): import("react/jsx-runtime").JSX.Element;
-    Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>>;
-    Content: React.FC<{
-        children?: React.ReactNode | undefined;
-    }>;
-    Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>>;
+    Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.ReactElement | null;
+    Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
+    Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.ReactElement | null;
 };
 export default Layout;

package/build/esm/components/CardBase/CardBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {useAnalytics} from '../../hooks';\nimport {\n    AnalyticsEventsBase,\n    CardBaseProps as CardBaseParams,\n    DefaultEventNames,\n    ImageProps,\n} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport BackgroundImage from '../BackgroundImage/BackgroundImage';\nimport RouterLink from '../RouterLink/RouterLink';\n\nimport './CardBase.scss';\n\ninterface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {\n    className?: string;\n    bodyClassName?: string;\n    contentClassName?: string;\n    url?: string;\n    urlTitle?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    qa?: string;\n    extraProps?: React.HTMLAttributes<HTMLElement>;\n}\n\nexport type CardBasePropsType = React.PropsWithChildren<CardBaseProps>;\n\nexport interface CardHeaderBaseProps {\n    className?: string;\n    image?: ImageProps | null;\n}\n\nexport interface CardFooterBaseProps {\n    className?: string;\n}\n\nconst b = block('card-base-block');\n\nconst Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>> = () => null;\nconst Content: React.FC<React.PropsWithChildren<{}>> = () => null;\nconst Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>> = () => null;\n\nexport const Layout = (props: CardBasePropsType) => {\n    const {\n        className,\n        bodyClassName,\n        analyticsEvents,\n        contentClassName,\n        children,\n        url,\n        target,\n        border = 'shadow',\n        urlTitle,\n        qa,\n        extraProps = {},\n    } = props;\n    const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n    let header, content, footer, image, headerClass, footerClass;\n    const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');\n\n    function handleChild(child: React.ReactElement) {\n        switch (child.type) {\n            case Header:\n                header = child.props.children;\n                image = child.props.image;\n                headerClass = child.props.className;\n                break;\n            case Content:\n                content = child.props.children;\n                break;\n            case Footer:\n                footer = child.props.children;\n                footerClass = child.props.className;\n                break;\n        }\n    }\n\n    React.Children.toArray(children).forEach((child) => {\n        if (React.isValidElement(child)) {\n            handleChild(child);\n        }\n    });\n\n    const cardContent = (\n        <React.Fragment>\n            {(header || image) && (\n                <BackgroundImage\n                    className={b('header', headerClass)}\n                    {...(typeof image === 'string' ? {src: image} : image)}\n                    qa={qaAttributes.header}\n                >\n                    <div className={b('header-content')}>{header}</div>\n                </BackgroundImage>\n            )}\n            <div className={b('body', bodyClassName)} data-qa={qaAttributes.body}>\n                <div className={b('content', contentClassName)} data-qa={qaAttributes.content}>\n                    {content}\n                </div>\n                {footer && (\n                    <div className={b('footer', footerClass)} data-qa={qaAttributes.footer}>\n                        {footer}\n                    </div>\n                )}\n            </div>\n        </React.Fragment>\n    );\n\n    const fullClassName = b({border}, className);\n\n    const onClick = () => {\n        handleAnalytics(analyticsEvents);\n    };\n\n    return url ? (\n        <RouterLink href={url}>\n            <Link\n                href={url}\n                target={target}\n                rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n                className={fullClassName}\n                onClick={onClick}\n                title={urlTitle}\n                extraProps={{\n                    draggable: false,\n                    onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n                    ...extraProps,\n                }}\n                qa={qa}\n            >\n                {cardContent}\n            </Link>\n        </RouterLink>\n    ) : (\n        <div className={fullClassName} data-qa={qa} {...extraProps}>\n            {cardContent}\n        </div>\n    );\n};\n\nLayout.Header = Header;\nLayout.Content = Content;\nLayout.Footer = Footer;\n\nexport default Layout;\n"]}
+{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {useAnalytics} from '../../hooks';\nimport {\n    AnalyticsEventsBase,\n    CardBaseProps as CardBaseParams,\n    DefaultEventNames,\n    ImageProps,\n} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport BackgroundImage from '../BackgroundImage/BackgroundImage';\nimport RouterLink from '../RouterLink/RouterLink';\n\nimport './CardBase.scss';\n\ninterface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {\n    className?: string;\n    bodyClassName?: string;\n    contentClassName?: string;\n    url?: string;\n    urlTitle?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    qa?: string;\n    extraProps?: React.HTMLAttributes<HTMLElement>;\n}\n\nexport type CardBasePropsType = React.PropsWithChildren<CardBaseProps>;\n\nexport interface CardHeaderBaseProps {\n    className?: string;\n    image?: ImageProps | null;\n}\n\nexport interface CardFooterBaseProps {\n    className?: string;\n}\n\nconst b = block('card-base-block');\n\nconst Header: (\n    props: React.PropsWithChildren<CardHeaderBaseProps>,\n) => React.ReactElement | null = () => null;\nconst Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\nconst Footer: (\n    props: React.PropsWithChildren<CardFooterBaseProps>,\n) => React.ReactElement | null = () => null;\n\nexport const Layout = (props: CardBasePropsType) => {\n    const {\n        className,\n        bodyClassName,\n        analyticsEvents,\n        contentClassName,\n        children,\n        url,\n        target,\n        border = 'shadow',\n        urlTitle,\n        qa,\n        extraProps = {},\n    } = props;\n    const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n    let header, content, footer, image, headerClass, footerClass;\n    const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');\n\n    function handleChild(child: React.ReactElement) {\n        switch (child.type) {\n            case Header:\n                header = child.props.children;\n                image = child.props.image;\n                headerClass = child.props.className;\n                break;\n            case Content:\n                content = child.props.children;\n                break;\n            case Footer:\n                footer = child.props.children;\n                footerClass = child.props.className;\n                break;\n        }\n    }\n\n    React.Children.toArray(children).forEach((child) => {\n        if (React.isValidElement(child)) {\n            handleChild(child);\n        }\n    });\n\n    const cardContent = (\n        <React.Fragment>\n            {(header || image) && (\n                <BackgroundImage\n                    className={b('header', headerClass)}\n                    {...(typeof image === 'string' ? {src: image} : image)}\n                    qa={qaAttributes.header}\n                >\n                    <div className={b('header-content')}>{header}</div>\n                </BackgroundImage>\n            )}\n            <div className={b('body', bodyClassName)} data-qa={qaAttributes.body}>\n                <div className={b('content', contentClassName)} data-qa={qaAttributes.content}>\n                    {content}\n                </div>\n                {footer && (\n                    <div className={b('footer', footerClass)} data-qa={qaAttributes.footer}>\n                        {footer}\n                    </div>\n                )}\n            </div>\n        </React.Fragment>\n    );\n\n    const fullClassName = b({border}, className);\n\n    const onClick = () => {\n        handleAnalytics(analyticsEvents);\n    };\n\n    return url ? (\n        <RouterLink href={url}>\n            <Link\n                href={url}\n                target={target}\n                rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n                className={fullClassName}\n                onClick={onClick}\n                title={urlTitle}\n                extraProps={{\n                    draggable: false,\n                    onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n                    ...extraProps,\n                }}\n                qa={qa}\n            >\n                {cardContent}\n            </Link>\n        </RouterLink>\n    ) : (\n        <div className={fullClassName} data-qa={qa} {...extraProps}>\n            {cardContent}\n        </div>\n    );\n};\n\nLayout.Header = Header;\nLayout.Content = Content;\nLayout.Footer = Footer;\n\nexport default Layout;\n"]}

package/build/esm/components/ContentIcon/ContentIcon.d.ts

@@ -0,0 +1,8 @@
+import { ClassNameProps, GravityIconProps, ImageProps, QAProps, SVGIcon } from "../../models/index.js";
+import { ThemeSupporting } from "../../utils/index.js";
+interface ContentIconProps extends QAProps, ClassNameProps {
+    icon?: ThemeSupporting<ImageProps | SVGIcon>;
+    gravityIcon?: ThemeSupporting<GravityIconProps>;
+}
+declare const ContentIcon: ({ icon, className, qa, gravityIcon }: ContentIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ContentIcon;

package/build/esm/components/ContentIcon/ContentIcon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../context/theme/index.js";
+import { getThemedValue } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+function isIconSvg(icon) {
+    return typeof icon === 'function';
+}
+const ContentIcon = ({ icon, className, qa, gravityIcon }) => {
+    const theme = useTheme();
+    const iconThemed = getThemedValue(icon, theme);
+    const gravityIconThemed = getThemedValue(gravityIcon, theme);
+    if (iconThemed && isIconSvg(iconThemed)) {
+        const IconComponent = iconThemed;
+        return (_jsx("div", { children: _jsx(IconComponent, { className: className }) }));
+    }
+    return _jsx(Icon, { icon: iconThemed, gravityIcon: gravityIconThemed, className: className, qa: qa });
+};
+export default ContentIcon;
+//# sourceMappingURL=ContentIcon.js.map

package/build/esm/components/ContentIcon/ContentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentIcon.js","sourceRoot":"../../../../src","sources":["components/ContentIcon/ContentIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAkB,cAAc,EAAC,6BAAoB;AAC5D,OAAO,IAAI,wBAAqB;AAOhC,SAAS,SAAS,CAAC,IAA0B;IACzC,OAAO,OAAO,IAAI,KAAK,UAAU,CAAC;AACtC,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAmB,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,MAAM,iBAAiB,GAAG,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAE7D,IAAI,UAAU,IAAI,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,UAAU,CAAC;QACjC,OAAO,CACH,wBACI,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI,GACrC,CACT,CAAC;IACN,CAAC;IAED,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,GAAI,CAAC;AACpG,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {useTheme} from '../../context/theme';\nimport {ClassNameProps, GravityIconProps, ImageProps, QAProps, SVGIcon} from '../../models';\nimport {ThemeSupporting, getThemedValue} from '../../utils';\nimport Icon from '../Icon/Icon';\n\ninterface ContentIconProps extends QAProps, ClassNameProps {\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nfunction isIconSvg(icon: ImageProps | SVGIcon): icon is SVGIcon {\n    return typeof icon === 'function';\n}\n\nconst ContentIcon = ({icon, className, qa, gravityIcon}: ContentIconProps) => {\n    const theme = useTheme();\n    const iconThemed = getThemedValue(icon, theme);\n    const gravityIconThemed = getThemedValue(gravityIcon, theme);\n\n    if (iconThemed && isIconSvg(iconThemed)) {\n        const IconComponent = iconThemed;\n        return (\n            <div>\n                <IconComponent className={className} />\n            </div>\n        );\n    }\n\n    return <Icon icon={iconThemed} gravityIcon={gravityIconThemed} className={className} qa={qa} />;\n};\n\nexport default ContentIcon;\n"]}

package/build/esm/components/ContentLabels/ContentLabels.css

@@ -0,0 +1,53 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-content-labels {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.pc-content-labels__label {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  padding: 5px 11px;
+  background-color: var(--g-color-base-generic);
+  border-radius: 6px;
+}
+.pc-content-labels__label, .pc-content-labels__label-text {
+  color: var(--g-color-text-primary);
+}
+.pc-content-labels__label > .pc-icon, .pc-content-labels__label > picture {
+  display: flex;
+}
+.pc-content-labels__label-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 6px;
+}
+.pc-content-labels__label_theme_light {
+  background-color: var(--g-color-private-black-50);
+}
+.pc-content-labels__label_theme_light,
+.pc-content-labels__label_theme_light .pc-content-labels__label-text {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-labels__label_theme_dark {
+  background-color: var(--g-color-private-white-100);
+}
+.pc-content-labels__label_theme_dark,
+.pc-content-labels__label_theme_dark .pc-content-labels__label-text {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-labels_size_l .pc-content-labels__label, .pc-content-labels_size_m .pc-content-labels__label {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pc-content-labels_size_s .pc-content-labels__label {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}

package/build/esm/components/ContentLabels/ContentLabels.d.ts

@@ -0,0 +1,4 @@
+import { ClassNameProps, ContentLabelsProps, QAProps } from "../../models/index.js";
+import './ContentLabels.css';
+declare const ContentLabels: ({ className, labels, theme, size, qa, }: ContentLabelsProps & ClassNameProps & QAProps) => import("react/jsx-runtime").JSX.Element;
+export default ContentLabels;

package/build/esm/components/ContentLabels/ContentLabels.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block, getQaAttrubutes } from "../../utils/index.js";
+import ContentIcon from "../ContentIcon/ContentIcon.js";
+import './ContentLabels.css';
+const b = block('content-labels');
+const ContentLabels = ({ className, labels, theme, size = 'l', qa, }) => {
+    const qaAttributes = getQaAttrubutes(qa, ['icon', 'text']);
+    return (_jsx("div", { className: b({ size }, className), children: labels.map((label) => {
+            const { text, icon, gravityIcon } = label;
+            return (_jsxs("div", { className: b('label', { theme }), children: [_jsx(ContentIcon, { className: b('label-icon'), icon: icon, gravityIcon: gravityIcon, qa: qaAttributes.icon }), _jsx("span", { className: b('label-text'), "data-qa": qaAttributes.text, children: text })] }, text));
+        }) }));
+};
+export default ContentLabels;
+//# sourceMappingURL=ContentLabels.js.map

package/build/esm/components/ContentLabels/ContentLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLabels.js","sourceRoot":"../../../../src","sources":["components/ContentLabels/ContentLabels.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,WAAW,sCAAmC;AAErD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,aAAa,GAAG,CAAC,EACnB,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAI,GAAG,GAAG,EACV,EAAE,GAC0C,EAAE,EAAE;IAChD,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3D,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAC/B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;YAExC,OAAO,CACH,eAAgB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAC,CAAC,aAC1C,KAAC,WAAW,IACR,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,EACF,eAAM,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,aAAW,YAAY,CAAC,IAAI,YACvD,IAAI,GACF,KATD,IAAI,CAUR,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {ClassNameProps, ContentLabelsProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport ContentIcon from '../ContentIcon/ContentIcon';\n\nimport './ContentLabels.scss';\n\nconst b = block('content-labels');\n\nconst ContentLabels = ({\n    className,\n    labels,\n    theme,\n    size = 'l',\n    qa,\n}: ContentLabelsProps & ClassNameProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['icon', 'text']);\n\n    return (\n        <div className={b({size}, className)}>\n            {labels.map((label) => {\n                const {text, icon, gravityIcon} = label;\n\n                return (\n                    <div key={text} className={b('label', {theme})}>\n                        <ContentIcon\n                            className={b('label-icon')}\n                            icon={icon}\n                            gravityIcon={gravityIcon}\n                            qa={qaAttributes.icon}\n                        />\n                        <span className={b('label-text')} data-qa={qaAttributes.text}>\n                            {text}\n                        </span>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentLabels;\n"]}

package/build/esm/components/ContentList/ContentList.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { block } from "../../utils/index.js";
 import { getQaAttrubutes } from "../../utils/blocks.js";
+import ContentIcon from "../ContentIcon/ContentIcon.js";
 import YFMWrapper from "../YFMWrapper/YFMWrapper.js";
-import ItemIcon from "./ContentListItemIcon.js";
 import './ContentList.css';
 const b = block('content-list');
 function getHeadingLevel(size) {
@@ -19,8 +19,8 @@ function getHeadingLevel(size) {
 const ContentList = ({ list, size = 'l', qa, theme }) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
     return (_jsx("div", { className: b({ size, theme }), "data-qa": qa, children: list?.map((item) => {
-            const { icon, title, text } = item;
-            return (_jsxs("div", { className: b('item', { 'without-title': !title }), children: [_jsx(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image }), _jsxs("div", { children: [title &&
+            const { icon, title, text, gravityIcon } = item;
+            return (_jsxs("div", { className: b('item', { 'without-title': !title }), children: [_jsx(ContentIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image, gravityIcon: gravityIcon }), _jsxs("div", { children: [title &&
                                 React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, _jsx(YFMWrapper, { content: title, modifiers: { constructor: true } })), text && (_jsx(YFMWrapper, { contentClassName: b('text', { 'without-title': !title }), content: text, modifiers: { constructor: true }, qa: qaAttributes.text }))] })] }, uuidv4()));
         }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,IAAI,MAAM,EAAC,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,eAAe,EAAC,8BAA2B;AACnD,OAAO,UAAU,oCAAiC;AAElD,OAAO,QAAQ,iCAA8B;AAE7C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC;YACjC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,EACtE,0BACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,KAAC,UAAU,IACP,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,EACtD,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAjBiD,MAAM,EAAE,CAkB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport ItemIcon from './ContentListItemIcon';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ItemIcon icon={icon} className={b('icon')} qa={qaAttributes.image} />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    contentClassName={b('text', {'without-title': !title})}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}
+{"version":3,"file":"ContentList.js","sourceRoot":"../../../../src","sources":["components/ContentList/ContentList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,IAAI,MAAM,EAAC,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,eAAe,EAAC,8BAA2B;AACnD,OAAO,WAAW,sCAAmC;AACrD,OAAO,UAAU,oCAAiC;AAElD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,IAAI,CAAC;QAChB,KAAK,GAAG,CAAC;QACT;YACI,OAAO,IAAI,CAAC;IACpB,CAAC;AACL,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,aAAW,EAAE,YACxC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC;YAC9C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,aAChD,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,WAAW,EAAE,WAAW,GAC1B,EACF,0BACK,KAAK;gCACF,KAAK,CAAC,aAAa,CACf,eAAe,CAAC,IAAI,CAAC,EACrB,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,EAAC,EACtD,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,CACjE,EACJ,IAAI,IAAI,CACL,KAAC,UAAU,IACP,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,CAAC,KAAK,EAAC,CAAC,EACtD,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,EAC9B,EAAE,EAAE,YAAY,CAAC,IAAI,GACvB,CACL,IACC,KAtBiD,MAAM,EAAE,CAuB7D,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {v4 as uuidv4} from 'uuid';\n\nimport {ContentListProps, ContentSize} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {block} from '../../utils';\nimport {getQaAttrubutes} from '../../utils/blocks';\nimport ContentIcon from '../ContentIcon/ContentIcon';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport './ContentList.scss';\n\nconst b = block('content-list');\n\nfunction getHeadingLevel(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 'h4';\n        case 'l':\n        default:\n            return 'h3';\n    }\n}\n\nconst ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => {\n    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);\n\n    return (\n        <div className={b({size, theme})} data-qa={qa}>\n            {list?.map((item) => {\n                const {icon, title, text, gravityIcon} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ContentIcon\n                            icon={icon}\n                            className={b('icon')}\n                            qa={qaAttributes.image}\n                            gravityIcon={gravityIcon}\n                        />\n                        <div>\n                            {title &&\n                                React.createElement(\n                                    getHeadingLevel(size),\n                                    {className: b('title'), 'data-qa': qaAttributes.title},\n                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,\n                                )}\n                            {text && (\n                                <YFMWrapper\n                                    contentClassName={b('text', {'without-title': !title})}\n                                    content={text}\n                                    modifiers={{constructor: true}}\n                                    qa={qaAttributes.text}\n                                />\n                            )}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default ContentList;\n"]}

package/build/esm/components/DefaultVideo/DefaultVideo.js

@@ -8,7 +8,7 @@ import './DefaultVideo.css';
 const b = block('default-video');
 export const DefaultVideo = React.forwardRef((props, ref) => {
     const { video, qa, customBarControlsClassName } = props;
-    const { controls, customControlsOptions, muted: initiallyMuted = true } = video;
+    const { controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd, loop, } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = React.useState(false);
     const [isMuted, setIsMuted] = React.useState(initiallyMuted);
@@ -25,6 +25,13 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
         }
         return videoRef.current;
     }, [videoRef]);
+    // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389
+    React.useEffect(() => {
+        const videoElement = videoRef.current;
+        if (videoElement && initiallyMuted) {
+            videoElement.defaultMuted = true;
+        }
+    }, [videoRef, initiallyMuted]);
     const onPlayToggle = React.useCallback(() => {
         setIsPaused((value) => {
             if (value) {
@@ -44,10 +51,24 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
             onPlayToggle();
         }
     }, [onPlayToggle, customControlsType]);
+    const onEnded = React.useCallback(() => {
+        const videoElement = videoRef.current;
+        if (!videoElement) {
+            return;
+        }
+        if (loop) {
+            const { start = 0, end = videoElement.duration } = typeof loop === 'boolean' ? {} : loop;
+            if (videoElement.currentTime >= end) {
+                videoElement.currentTime = start;
+                videoElement.play();
+            }
+        }
+        onVideoEnd?.();
+    }, [loop, onVideoEnd]);
     return (_jsxs(React.Fragment, { children: [_jsxs("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick, onEnded: onEnded, children: [getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (_jsx("source", { src: src, type: type, "data-qa": qa }, index))), _jsx("track", { default: true, kind: "captions" })] }), controls === MediaVideoControlsType.Custom && (_jsx(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                     isMuted: Boolean(isMuted),
                     changeMute: onMuteToggle,
                 } }))] }));

package/build/esm/components/DefaultVideo/DefaultVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {controls, customControlsOptions, muted: initiallyMuted = true} = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}
+{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {\n            controls,\n            customControlsOptions,\n            muted: initiallyMuted = true,\n            onVideoEnd,\n            loop,\n        } = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        const onEnded = React.useCallback(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement) {\n                return;\n            }\n\n            if (loop) {\n                const {start = 0, end = videoElement.duration} =\n                    typeof loop === 'boolean' ? {} : loop;\n\n                if (videoElement.currentTime >= end) {\n                    videoElement.currentTime = start;\n                    videoElement.play();\n                }\n            }\n\n            onVideoEnd?.();\n        }, [loop, onVideoEnd]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                    onEnded={onEnded}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}

package/build/esm/components/FullscreenMedia/FullscreenMedia.css

@@ -29,7 +29,9 @@ 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/Icon/Icon.css

@@ -0,0 +1,10 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-icon_color_brand {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--g-color-base-brand) !important;
+}
+.pc-icon_color_brand * {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--g-color-base-brand) !important;
+}

package/build/esm/components/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import { GravityIconProps, ImageProps, QAProps } from "../../models/index.js";
+import { ImageProps as ImageComponentProps } from "../Image/Image.js";
+import './Icon.css';
+type Props = {
+    gravityIcon?: GravityIconProps;
+    icon?: ImageProps;
+    className?: string;
+} & Pick<ImageComponentProps, 'containerClassName'> & QAProps;
+declare const Icon: ({ icon, className, gravityIcon, containerClassName, qa }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default Icon;

package/build/esm/components/Icon/Icon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as icons from '@gravity-ui/icons';
+import { Icon as UiKitIcon } from '@gravity-ui/uikit';
+import { block } from "../../utils/index.js";
+import Image from "../Image/Image.js";
+import { getMediaImage } from "../Media/Image/utils.js";
+import './Icon.css';
+const b = block('icon');
+const Icon = ({ icon, className, gravityIcon, containerClassName, qa }) => {
+    if (gravityIcon) {
+        const data = (typeof gravityIcon === 'string' ? gravityIcon : gravityIcon.name);
+        const color = typeof gravityIcon === 'string' ? 'brand' : gravityIcon.color;
+        return (_jsx("div", { className: b({ color }), children: _jsx(UiKitIcon, { data: icons[data], className: className, qa: qa }) }));
+    }
+    if (icon) {
+        const image = getMediaImage(icon);
+        return (_jsx(Image, { ...image, containerClassName: containerClassName, className: className, qa: qa }));
+    }
+    return null;
+};
+export default Icon;
+//# sourceMappingURL=Icon.js.map

package/build/esm/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"../../../../src","sources":["components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,IAAI,IAAI,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,KAA0C,0BAAuB;AACxE,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAEnD,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AASxB,MAAM,IAAI,GAAG,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,EAAQ,EAAE,EAAE;IAC3E,IAAI,WAAW,EAAE,CAAC;QACd,MAAM,IAAI,GAAG,CACT,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAC7C,CAAC;QACxB,MAAM,KAAK,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;QAE5E,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,CAAC,YACtB,KAAC,SAAS,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,GAAI,GAC5D,CACT,CAAC;IACN,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;QAElC,OAAO,CACH,KAAC,KAAK,OACE,KAAK,EACT,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,GACR,CACL,CAAC;IACN,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as icons from '@gravity-ui/icons';\nimport {Icon as UiKitIcon} from '@gravity-ui/uikit';\n\nimport {GravityIconProps, ImageProps, QAProps} from '../../models';\nimport {block} from '../../utils';\nimport Image, {ImageProps as ImageComponentProps} from '../Image/Image';\nimport {getMediaImage} from '../Media/Image/utils';\n\nimport './Icon.scss';\n\nconst b = block('icon');\n\ntype Props = {\n    gravityIcon?: GravityIconProps;\n    icon?: ImageProps;\n    className?: string;\n} & Pick<ImageComponentProps, 'containerClassName'> &\n    QAProps;\n\nconst Icon = ({icon, className, gravityIcon, containerClassName, qa}: Props) => {\n    if (gravityIcon) {\n        const data = (\n            typeof gravityIcon === 'string' ? gravityIcon : gravityIcon.name\n        ) as keyof typeof icons;\n        const color = typeof gravityIcon === 'string' ? 'brand' : gravityIcon.color;\n\n        return (\n            <div className={b({color})}>\n                <UiKitIcon data={icons[data]} className={className} qa={qa} />\n            </div>\n        );\n    }\n\n    if (icon) {\n        const image = getMediaImage(icon);\n\n        return (\n            <Image\n                {...image}\n                containerClassName={containerClassName}\n                className={className}\n                qa={qa}\n            />\n        );\n    }\n    return null;\n};\n\nexport default Icon;\n"]}

package/build/esm/components/IconWrapper/IconWrapper.css

@@ -17,10 +17,25 @@ unpredictable css rules order in build */
   object-fit: contain;
   display: block;
 }
+.pc-icon-wrapper__icon_gravity-icon {
+  width: 32px;
+}
 .pc-icon-wrapper__icon_icon-position_left {
   height: 22px;
   width: 22px;
-  margin: 1px 12px 1px 0px;
+  margin: 1px 12px 1px 0;
+}
+.pc-icon-wrapper__icon_icon-position_left.pc-icon-wrapper__icon_size_m {
+  height: 28px;
+  width: 28px;
+  margin-bottom: 4px;
+  margin-top: 4px;
+}
+.pc-icon-wrapper__icon_icon-position_left.pc-icon-wrapper__icon_size_l {
+  height: 32px;
+  width: 32px;
+  margin-bottom: 4px;
+  margin-top: 4px;
 }
 .pc-icon-wrapper__content {
   display: flex;

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

@@ -1,18 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { block } from "../../utils/index.js";
-import Image from "../Image/Image.js";
-import { getMediaImage } from "../Media/Image/utils.js";
+import Icon from "../Icon/Icon.js";
 import './IconWrapper.css';
 const b = block('icon-wrapper');
 const IconWrapper = (props) => {
-    const { icon, children, className } = props;
-    if (!icon) {
+    const { icon, children, className, size, gravityIcon } = props;
+    if (!icon && !gravityIcon) {
         return _jsx(React.Fragment, { children: children });
     }
-    const iconProps = getMediaImage(icon.value);
     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 })] }));
+    const gravityIconPosition = gravityIcon?.position;
+    const position = gravityIconPosition || iconPosition;
+    return (_jsxs("div", { className: b({ ['icon-position']: position }, className), children: [_jsx(Icon, { icon: icon?.value, gravityIcon: gravityIcon?.value, containerClassName: b('icon-container'), className: b('icon', {
+                    ['icon-position']: position,
+                    size,
+                    ['gravity-icon']: Boolean(gravityIcon),
+                }) }), _jsx("div", { className: b('content', { ['icon-position']: position }), children: children })] }));
 };
 export default IconWrapper;
 //# sourceMappingURL=IconWrapper.js.map

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

@@ -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,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"]}
+{"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,IAAI,wBAAqB;AAEhC,OAAO,mBAAmB,CAAC;AAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,KAAiE,EAAE,EAAE;IACtF,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;IACvD,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,EAAE,QAAQ,CAAC;IAEpC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ,CAAC;IAElD,MAAM,QAAQ,GAAG,mBAAmB,IAAI,YAAY,CAAC;IAErD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,EAAE,SAAS,CAAC,aACvD,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EAAE,KAAK,EACjB,WAAW,EAAE,WAAW,EAAE,KAAK,EAC/B,kBAAkB,EAAE,CAAC,CAAC,gBAAgB,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;oBACjB,CAAC,eAAe,CAAC,EAAE,QAAQ;oBAC3B,IAAI;oBACJ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC;iBACzC,CAAC,GACJ,EACF,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAC,CAAC,YAAG,QAAQ,GAAO,IAC3E,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 Icon from '../Icon/Icon';\n\nimport './IconWrapper.scss';\nconst b = block('icon-wrapper');\n\nconst IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {\n    const {icon, children, className, size, gravityIcon} = props;\n    if (!icon && !gravityIcon) {\n        return <React.Fragment>{children}</React.Fragment>;\n    }\n\n    const iconPosition = icon?.position;\n\n    const gravityIconPosition = gravityIcon?.position;\n\n    const position = gravityIconPosition || iconPosition;\n\n    return (\n        <div className={b({['icon-position']: position}, className)}>\n            <Icon\n                icon={icon?.value}\n                gravityIcon={gravityIcon?.value}\n                containerClassName={b('icon-container')}\n                className={b('icon', {\n                    ['icon-position']: position,\n                    size,\n                    ['gravity-icon']: Boolean(gravityIcon),\n                })}\n            />\n            <div className={b('content', {['icon-position']: position})}>{children}</div>\n        </div>\n    );\n};\n\nexport default IconWrapper;\n"]}

package/build/esm/components/InnerForm/InnerForm.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { FormBlockData } from "../../models/index.js";
 interface InnerFormProps {
     formData: FormBlockData;
     onContentLoad: () => void;
     className?: string;
 }
-declare const InnerForm: React.FC<InnerFormProps>;
+declare const InnerForm: (props: InnerFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export default InnerForm;

package/build/esm/components/InnerForm/InnerForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InnerForm.js","sourceRoot":"../../../../src","sources":["components/InnerForm/InnerForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAC,oBAAW;AAC9B,OAAO,EACH,YAAY,GAGf,mDAAgD;AACjD,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAgB,iBAAiB,EAAE,gBAAgB,EAAC,8BAAqB;AAChF,OAAO,EAAC,WAAW,EAAC,kCAAyB;AAC7C,OAAO,EAAC,cAAc,EAAC,6BAAoB;AAQ3C,MAAM,SAAS,GAA6B,CAAC,KAAK,EAAE,EAAE;IAClD,MAAM,EAAC,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IACnD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9B,aAAa,EAAE,CAAC;QACpB,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,MAAM,EAAC,MAAM,EAAE,GAAG,IAAI,EAAC,GAAG,cAAc,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjE,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,UAAU,OACF,WAAW,CAAC,MAA8C,KAC3D,IAAI,EACR,MAAM,EAAE,GAAG,EAAE;oBACT,aAAa,EAAE,CAAC;oBAChB,MAAM,EAAE,EAAE,CAAC;gBACf,CAAC,GACH,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC9B,MAAM,cAAc,GAAG,cAAc,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAE/D,OAAO,CACH,KAAC,WAAW,IACR,gBAAgB,EAAE,IAAI,KACjB,WAAW,CAAC,OAAgD,KAC7D,cAAc,GACpB,CACL,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {YandexForm} from '..';\nimport {\n    FormsContext,\n    HubspotFormsContextProps,\n    YandexFormsContextProps,\n} from '../../context/formsContext/FormsContext';\nimport {useTheme} from '../../context/theme';\nimport {FormBlockData, isHubspotDataForm, isYandexDataForm} from '../../models';\nimport {HubspotForm} from '../../sub-blocks';\nimport {getThemedValue} from '../../utils';\n\ninterface InnerFormProps {\n    formData: FormBlockData;\n    onContentLoad: () => void;\n    className?: string;\n}\n\nconst InnerForm: React.FC<InnerFormProps> = (props) => {\n    const {formData, onContentLoad, className} = props;\n    const formsConfig = React.useContext(FormsContext);\n    const theme = useTheme();\n\n    React.useEffect(() => {\n        if (isHubspotDataForm(formData)) {\n            onContentLoad();\n        }\n    }, [onContentLoad, formData]);\n\n    if (isYandexDataForm(formData)) {\n        const {onLoad, ...rest} = getThemedValue(formData.yandex, theme);\n\n        return (\n            <div className={className}>\n                <YandexForm\n                    {...(formsConfig.yandex as YandexFormsContextProps | undefined)}\n                    {...rest}\n                    onLoad={() => {\n                        onContentLoad();\n                        onLoad?.();\n                    }}\n                />\n            </div>\n        );\n    }\n\n    if (isHubspotDataForm(formData)) {\n        const themedFormData = getThemedValue(formData.hubspot, theme);\n\n        return (\n            <HubspotForm\n                createDOMElement={true}\n                {...(formsConfig.hubspot as HubspotFormsContextProps | undefined)}\n                {...themedFormData}\n            />\n        );\n    }\n\n    return null;\n};\n\nexport default InnerForm;\n"]}
+{"version":3,"file":"InnerForm.js","sourceRoot":"../../../../src","sources":["components/InnerForm/InnerForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAC,oBAAW;AAC9B,OAAO,EACH,YAAY,GAGf,mDAAgD;AACjD,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAgB,iBAAiB,EAAE,gBAAgB,EAAC,8BAAqB;AAChF,OAAO,EAAC,WAAW,EAAC,kCAAyB;AAC7C,OAAO,EAAC,cAAc,EAAC,6BAAoB;AAQ3C,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACxC,MAAM,EAAC,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;IACnD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9B,aAAa,EAAE,CAAC;QACpB,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,MAAM,EAAC,MAAM,EAAE,GAAG,IAAI,EAAC,GAAG,cAAc,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjE,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,UAAU,OACF,WAAW,CAAC,MAA8C,KAC3D,IAAI,EACR,MAAM,EAAE,GAAG,EAAE;oBACT,aAAa,EAAE,CAAC;oBAChB,MAAM,EAAE,EAAE,CAAC;gBACf,CAAC,GACH,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC9B,MAAM,cAAc,GAAG,cAAc,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAE/D,OAAO,CACH,KAAC,WAAW,IACR,gBAAgB,EAAE,IAAI,KACjB,WAAW,CAAC,OAAgD,KAC7D,cAAc,GACpB,CACL,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {YandexForm} from '..';\nimport {\n    FormsContext,\n    HubspotFormsContextProps,\n    YandexFormsContextProps,\n} from '../../context/formsContext/FormsContext';\nimport {useTheme} from '../../context/theme';\nimport {FormBlockData, isHubspotDataForm, isYandexDataForm} from '../../models';\nimport {HubspotForm} from '../../sub-blocks';\nimport {getThemedValue} from '../../utils';\n\ninterface InnerFormProps {\n    formData: FormBlockData;\n    onContentLoad: () => void;\n    className?: string;\n}\n\nconst InnerForm = (props: InnerFormProps) => {\n    const {formData, onContentLoad, className} = props;\n    const formsConfig = React.useContext(FormsContext);\n    const theme = useTheme();\n\n    React.useEffect(() => {\n        if (isHubspotDataForm(formData)) {\n            onContentLoad();\n        }\n    }, [onContentLoad, formData]);\n\n    if (isYandexDataForm(formData)) {\n        const {onLoad, ...rest} = getThemedValue(formData.yandex, theme);\n\n        return (\n            <div className={className}>\n                <YandexForm\n                    {...(formsConfig.yandex as YandexFormsContextProps | undefined)}\n                    {...rest}\n                    onLoad={() => {\n                        onContentLoad();\n                        onLoad?.();\n                    }}\n                />\n            </div>\n        );\n    }\n\n    if (isHubspotDataForm(formData)) {\n        const themedFormData = getThemedValue(formData.hubspot, theme);\n\n        return (\n            <HubspotForm\n                createDOMElement={true}\n                {...(formsConfig.hubspot as HubspotFormsContextProps | undefined)}\n                {...themedFormData}\n            />\n        );\n    }\n\n    return null;\n};\n\nexport default InnerForm;\n"]}

package/build/esm/components/Link/Link.d.ts

@@ -3,5 +3,5 @@ import { ClassNameProps, LinkProps, Tabbable } from "../../models/index.js";
 import { QAProps } from "../../models/common.js";
 import './Link.css';
 export type LinkFullProps = LinkProps & ClassNameProps & Tabbable & QAProps;
-declare const LinkBlock: (props: React.PropsWithChildren<LinkFullProps>) => import("react/jsx-runtime").JSX.Element;
-export default LinkBlock;
+declare const Link: (props: React.PropsWithChildren<LinkFullProps>) => import("react/jsx-runtime").JSX.Element;
+export default Link;

package/build/esm/components/Link/Link.js

@@ -34,7 +34,7 @@ function getTextSize({ size, theme }) {
     }
     return size;
 }
-const LinkBlock = (props) => {
+const Link = (props) => {
     const { text, url, arrow, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, extraProps, } = props;
     const qaAttributes = getQaAttrubutes(qa, ['normal']);
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
@@ -62,5 +62,5 @@ const LinkBlock = (props) => {
     };
     return (_jsx("div", { className: b({ size: getTextSize({ size: textSize, theme }) }, className), children: getLinkByType() }));
 };
-export default LinkBlock;
+export default Link;
 //# sourceMappingURL=Link.js.map