@gravity-ui/page-constructor 7.21.1 → 7.22.0

package/build/esm/blocks/Form/schema.d.ts

@@ -164,6 +164,17 @@ export declare const FormBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];
@@ -173,7 +184,7 @@ export declare const FormBlock: {
             direction: {
                 enum: string[];
             };
-            image: {
+            background: {
                 oneOf: ({
                     type: string;
                     properties: {
@@ -200,9 +211,6 @@ export declare const FormBlock: {
                     pattern?: undefined;
                 })[];
             };
-            backgroundColor: {
-                type: string;
-            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

package/build/esm/blocks/Form/schema.js

@@ -39,10 +39,7 @@ export const FormBlock = {
             direction: {
                 enum: ['content-form', 'form-content', 'center'],
             },
-            image: ImageProps,
-            backgroundColor: {
-                type: 'string',
-            },
+            background: ImageProps,
         },
     },
 };

package/build/esm/blocks/Form/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Form/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,EAAC,UAAU,EAAC,yCAAsC;AACzD,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,cAAc,EAAE,SAAS,EAAC,0CAAuC;AACzE,OAAO,EAAC,WAAW,EAAC,2CAAwC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,+CAA4C;AAErE,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,YAAY,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,UAAU,CAAC;QACtB,UAAU,EAAE;YACR,GAAG,cAAc;YACjB,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;YACD,QAAQ,EAAE;gBACN,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,QAAQ;wBACpB,UAAU,EAAE;4BACR,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC;yBACrC;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,SAAS;wBACrB,UAAU,EAAE;4BACR,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC;yBACvC;qBACJ;iBACJ;aACJ;YACD,WAAW,EAAE;gBACT,oBAAoB,EAAE,KAAK;gBAC3B,UAAU,EAAE,qBAAqB;aACpC;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,CAAC;aACnD;YACD,KAAK,EAAE,UAAU;YACjB,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;aACjB;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport {ImageProps} from '../../components/Image/schema';\nimport {YandexFormProps} from '../../components/YandexForm/schema';\nimport {BlockBaseProps, withTheme} from '../../schema/validators/common';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\nimport {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';\n\nconst FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);\n\nexport const FormBlock = {\n    'form-block': {\n        additionalProperties: false,\n        required: ['formData'],\n        properties: {\n            ...BlockBaseProps,\n            title: {\n                type: 'string',\n            },\n            formData: {\n                oneOf: [\n                    {\n                        type: 'object',\n                        optionName: 'yandex',\n                        properties: {\n                            yandex: withTheme(YandexFormProps),\n                        },\n                    },\n                    {\n                        type: 'object',\n                        optionName: 'hubspot',\n                        properties: {\n                            hubspot: withTheme(HubspotFormProps),\n                        },\n                    },\n                ],\n            },\n            textContent: {\n                additionalProperties: false,\n                properties: FormBlockContentProps,\n            },\n            direction: {\n                enum: ['content-form', 'form-content', 'center'],\n            },\n            image: ImageProps,\n            backgroundColor: {\n                type: 'string',\n            },\n        },\n    },\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Form/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,EAAC,UAAU,EAAC,yCAAsC;AACzD,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,cAAc,EAAE,SAAS,EAAC,0CAAuC;AACzE,OAAO,EAAC,WAAW,EAAC,2CAAwC;AAC5D,OAAO,EAAC,gBAAgB,EAAC,+CAA4C;AAErE,MAAM,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,YAAY,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,UAAU,CAAC;QACtB,UAAU,EAAE;YACR,GAAG,cAAc;YACjB,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;YACD,QAAQ,EAAE;gBACN,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,QAAQ;wBACpB,UAAU,EAAE;4BACR,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC;yBACrC;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,UAAU,EAAE,SAAS;wBACrB,UAAU,EAAE;4BACR,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC;yBACvC;qBACJ;iBACJ;aACJ;YACD,WAAW,EAAE;gBACT,oBAAoB,EAAE,KAAK;gBAC3B,UAAU,EAAE,qBAAqB;aACpC;YACD,SAAS,EAAE;gBACP,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,CAAC;aACnD;YACD,UAAU,EAAE,UAAU;SACzB;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport {ImageProps} from '../../components/Image/schema';\nimport {YandexFormProps} from '../../components/YandexForm/schema';\nimport {BlockBaseProps, withTheme} from '../../schema/validators/common';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\nimport {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';\n\nconst FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);\n\nexport const FormBlock = {\n    'form-block': {\n        additionalProperties: false,\n        required: ['formData'],\n        properties: {\n            ...BlockBaseProps,\n            title: {\n                type: 'string',\n            },\n            formData: {\n                oneOf: [\n                    {\n                        type: 'object',\n                        optionName: 'yandex',\n                        properties: {\n                            yandex: withTheme(YandexFormProps),\n                        },\n                    },\n                    {\n                        type: 'object',\n                        optionName: 'hubspot',\n                        properties: {\n                            hubspot: withTheme(HubspotFormProps),\n                        },\n                    },\n                ],\n            },\n            textContent: {\n                additionalProperties: false,\n                properties: FormBlockContentProps,\n            },\n            direction: {\n                enum: ['content-form', 'form-content', 'center'],\n            },\n            background: ImageProps,\n        },\n    },\n};\n"]}

package/build/esm/blocks/Form/utils.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BACKGROUND_STYLE_PROPS: readonly ["background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "backgroundPosition"];
+export declare const hasBackgroundCSS: (style: React.CSSProperties) => boolean;

package/build/esm/blocks/Form/utils.js

@@ -0,0 +1,16 @@
+export const BACKGROUND_STYLE_PROPS = [
+    'background',
+    'backgroundAttachment',
+    'backgroundBlendMode',
+    'backgroundClip',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundOrigin',
+    'backgroundPositionX',
+    'backgroundPositionY',
+    'backgroundRepeat',
+    'backgroundSize',
+    'backgroundPosition',
+];
+export const hasBackgroundCSS = (style) => BACKGROUND_STYLE_PROPS.some((backgroundStyleProp) => backgroundStyleProp in style);
+//# sourceMappingURL=utils.js.map

package/build/esm/blocks/Form/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["blocks/Form/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,YAAY;IACZ,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;IAClB,qBAAqB;IACrB,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,oBAAoB;CACd,CAAC;AAEX,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,EAAE,CAC3D,sBAAsB,CAAC,IAAI,CAAC,CAAC,mBAAmB,EAAE,EAAE,CAAC,mBAAmB,IAAI,KAAK,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nexport const BACKGROUND_STYLE_PROPS = [\n    'background',\n    'backgroundAttachment',\n    'backgroundBlendMode',\n    'backgroundClip',\n    'backgroundColor',\n    'backgroundImage',\n    'backgroundOrigin',\n    'backgroundPositionX',\n    'backgroundPositionY',\n    'backgroundRepeat',\n    'backgroundSize',\n    'backgroundPosition',\n] as const;\n\nexport const hasBackgroundCSS = (style: React.CSSProperties) =>\n    BACKGROUND_STYLE_PROPS.some((backgroundStyleProp) => backgroundStyleProp in style);\n"]}

package/build/esm/blocks/Info/schema.d.ts

@@ -135,6 +135,17 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];
@@ -226,6 +237,17 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    labels: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                     controlPosition: {
                         type: string;
                         enum: string[];

package/build/esm/blocks/Map/schema.d.ts

@@ -421,6 +421,17 @@ export declare const MapBlock: {
                 type: string;
                 enum: string[];
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

package/build/esm/blocks/Media/schema.d.ts

@@ -537,6 +537,17 @@ export declare const MediaBlockBaseProps: {
         type: string;
         enum: string[];
     };
+    labels: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
     additionalInfo: {
         type: string;
         contentType: string;
@@ -1178,6 +1189,17 @@ export declare const MediaBlock: {
                 type: string;
                 enum: string[];
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

package/build/esm/blocks/Questions/schema.d.ts

@@ -51,6 +51,17 @@ export declare const QuestionsBlock: {
                 contentType: string;
                 inputType: string;
             };
+            labels: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             additionalInfo: {
                 type: string;
                 contentType: string;

package/build/esm/blocks/Tabs/schema.d.ts

@@ -571,6 +571,17 @@ export declare const tabsItem: {
                 };
             };
         } | undefined;
+        labels?: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        } | undefined;
         controlPosition?: {
             type: string;
             enum: string[];

package/build/esm/components/{ContentList/ContentListItemIcon.d.ts → ContentIcon/ContentIcon.d.ts}

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

package/build/esm/components/{ContentList/ContentListItemIcon.js → ContentIcon/ContentIcon.js}

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon.js";
 function isIconSvg(icon) {
     return typeof icon === 'function';
 }
-const ContentListItemIcon = ({ icon, className, qa, gravityIcon }) => {
+const ContentIcon = ({ icon, className, qa, gravityIcon }) => {
     const theme = useTheme();
     const iconThemed = getThemedValue(icon, theme);
     const gravityIconThemed = getThemedValue(gravityIcon, theme);
@@ -15,5 +15,5 @@ const ContentListItemIcon = ({ icon, className, qa, gravityIcon }) => {
     }
     return _jsx(Icon, { icon: iconThemed, gravityIcon: gravityIconThemed, className: className, qa: qa });
 };
-export default ContentListItemIcon;
-//# sourceMappingURL=ContentListItemIcon.js.map
+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) {
@@ -20,7 +20,7 @@ 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, gravityIcon } = item;
-            return (_jsxs("div", { className: b('item', { 'without-title': !title }), children: [_jsx(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image, gravityIcon: gravityIcon }), _jsxs("div", { children: [title &&
+            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,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,QAAQ,IACL,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 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, gravityIcon} = item;\n                return (\n                    <div className={b('item', {'without-title': !title})} key={uuidv4()}>\n                        <ItemIcon\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"]}
+{"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/context/windowWidthContext/{BreakpointContext.js → WindowWidthContext.js}

@@ -2,17 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import throttle from "lodash/throttle.js";
 import { BREAKPOINTS } from "../../constants.js";
-import { SSRContext } from "../ssrContext/index.js";
 const DEFAULT_WIDTH = BREAKPOINTS.xl;
 const UPDATE_FREQUENCY_MS = 100;
 export const WindowWidthContext = React.createContext(DEFAULT_WIDTH);
 export const WindowWidthProvider = ({ children }) => {
-    const { isServer } = React.useContext(SSRContext);
     const [windowWidth, setWindowWidth] = React.useState(DEFAULT_WIDTH);
     React.useEffect(() => {
-        if (isServer) {
-            return;
-        }
         const handleResize = throttle(() => {
             setWindowWidth(window.innerWidth);
         }, UPDATE_FREQUENCY_MS, { leading: true });
@@ -20,8 +15,8 @@ export const WindowWidthProvider = ({ children }) => {
         window.addEventListener('resize', handleResize, { passive: true });
         // eslint-disable-next-line consistent-return
         return () => window.removeEventListener('resize', handleResize);
-    }, [isServer]);
+    }, []);
     return (_jsx(WindowWidthContext.Provider, { value: windowWidth, children: children }));
 };
 export const useWindowWidth = () => React.useContext(WindowWidthContext);
-//# sourceMappingURL=BreakpointContext.js.map
+//# sourceMappingURL=WindowWidthContext.js.map

package/build/esm/context/windowWidthContext/WindowWidthContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowWidthContext.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/WindowWidthContext.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,EAAC,WAAW,EAAC,2BAAwB;AAE5C,MAAM,aAAa,GAAG,WAAW,CAAC,EAAE,CAAC;AACrC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAS,aAAa,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,YAAY,GAAG,QAAQ,CACzB,GAAG,EAAE;YACD,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,EACD,mBAAmB,EACnB,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,CAAC;QAEF,YAAY,EAAE,CAAC;QAEf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEjE,6CAA6C;QAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAAG,QAAQ,GAA+B,CAC5F,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport throttle from 'lodash/throttle';\n\nimport {BREAKPOINTS} from '../../constants';\n\nconst DEFAULT_WIDTH = BREAKPOINTS.xl;\nconst UPDATE_FREQUENCY_MS = 100;\n\nexport const WindowWidthContext = React.createContext<number>(DEFAULT_WIDTH);\n\nexport const WindowWidthProvider = ({children}: React.PropsWithChildren) => {\n    const [windowWidth, setWindowWidth] = React.useState(DEFAULT_WIDTH);\n\n    React.useEffect(() => {\n        const handleResize = throttle(\n            () => {\n                setWindowWidth(window.innerWidth);\n            },\n            UPDATE_FREQUENCY_MS,\n            {leading: true},\n        );\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize, {passive: true});\n\n        // eslint-disable-next-line consistent-return\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n\n    return (\n        <WindowWidthContext.Provider value={windowWidth}>{children}</WindowWidthContext.Provider>\n    );\n};\n\nexport const useWindowWidth = () => React.useContext(WindowWidthContext);\n"]}

package/build/esm/context/windowWidthContext/index.d.ts

@@ -1 +1 @@
-export * from "./BreakpointContext.js";
+export * from "./WindowWidthContext.js";

package/build/esm/context/windowWidthContext/index.js

@@ -1,2 +1,2 @@
-export * from "./BreakpointContext.js";
+export * from "./WindowWidthContext.js";
 //# sourceMappingURL=index.js.map

package/build/esm/context/windowWidthContext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/index.ts"],"names":[],"mappings":"AAAA,uCAAoC","sourcesContent":["export * from './BreakpointContext';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["context/windowWidthContext/index.ts"],"names":[],"mappings":"AAAA,wCAAqC","sourcesContent":["export * from './WindowWidthContext';\n"]}

package/build/esm/hooks/useDeviceValue.d.ts

@@ -0,0 +1,2 @@
+import { DeviceSupporting } from "../utils/index.js";
+export declare function useDeviceValue<T>(value: DeviceSupporting<T>, inclusive?: boolean): T;

package/build/esm/hooks/useDeviceValue.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { BREAKPOINTS } from "../constants.js";
+import { useWindowWidth } from "../context/windowWidthContext/index.js";
+import { Device } from "../models/index.js";
+import { isDeviceValue } from "../utils/index.js";
+const getDeviceBreakpoints = (inclusive) => {
+    const shift = inclusive ? 0 : -1;
+    return [BREAKPOINTS.md + shift, BREAKPOINTS.sm + shift];
+};
+export function useDeviceValue(value, inclusive) {
+    const windowWidth = useWindowWidth();
+    const [tablet, mobile] = React.useMemo(() => getDeviceBreakpoints(inclusive), [inclusive]);
+    const isMobile = windowWidth <= mobile;
+    const isTablet = windowWidth <= tablet;
+    return React.useMemo(() => {
+        if (!isDeviceValue(value)) {
+            return value;
+        }
+        switch (true) {
+            case isMobile:
+                return value[Device.Mobile];
+            case isTablet:
+                return value[Device.Tablet] ?? value[Device.Mobile];
+            default:
+                return value[Device.Desktop];
+        }
+    }, [isMobile, isTablet, value]);
+}
+//# sourceMappingURL=useDeviceValue.js.map

package/build/esm/hooks/useDeviceValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceValue.js","sourceRoot":"../../../src","sources":["hooks/useDeviceValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,wBAAqB;AACzC,OAAO,EAAC,cAAc,EAAC,+CAAsC;AAC7D,OAAO,EAAC,MAAM,EAAC,2BAAkB;AACjC,OAAO,EAAmB,aAAa,EAAC,0BAAiB;AAEzD,MAAM,oBAAoB,GAAG,CAAC,SAAmB,EAAoC,EAAE;IACnF,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjC,OAAO,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAI,KAA0B,EAAE,SAAmB;IAC7E,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAE3F,MAAM,QAAQ,GAAG,WAAW,IAAI,MAAM,CAAC;IACvC,MAAM,QAAQ,GAAG,WAAW,IAAI,MAAM,CAAC;IAEvC,OAAO,KAAK,CAAC,OAAO,CAAI,GAAG,EAAE;QACzB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,QAAQ;gBACT,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAChC,KAAK,QAAQ;gBACT,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACxD;gBACI,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;AACpC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../constants';\nimport {useWindowWidth} from '../context/windowWidthContext';\nimport {Device} from '../models';\nimport {DeviceSupporting, isDeviceValue} from '../utils';\n\nconst getDeviceBreakpoints = (inclusive?: boolean): [tablet: number, mobile: number] => {\n    const shift = inclusive ? 0 : -1;\n\n    return [BREAKPOINTS.md + shift, BREAKPOINTS.sm + shift];\n};\n\nexport function useDeviceValue<T>(value: DeviceSupporting<T>, inclusive?: boolean): T {\n    const windowWidth = useWindowWidth();\n\n    const [tablet, mobile] = React.useMemo(() => getDeviceBreakpoints(inclusive), [inclusive]);\n\n    const isMobile = windowWidth <= mobile;\n    const isTablet = windowWidth <= tablet;\n\n    return React.useMemo<T>(() => {\n        if (!isDeviceValue(value)) {\n            return value;\n        }\n\n        switch (true) {\n            case isMobile:\n                return value[Device.Mobile];\n            case isTablet:\n                return value[Device.Tablet] ?? value[Device.Mobile];\n            default:\n                return value[Device.Desktop];\n        }\n    }, [isMobile, isTablet, value]);\n}\n"]}

package/build/esm/models/constructor-items/blocks.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType, IndentValue } from "../../grid/types.js";
 import { ThemeSupporting } from "../../utils/index.js";
+import { DeviceSupporting } from "../../utils/breakpoint.js";
 import { AnalyticsEventsBase } from "../common.js";
 import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, GravityIconProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from "./common.js";
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from "./sub-blocks.js";
@@ -143,7 +144,7 @@ export interface HeaderBlockProps {
     status?: JSX.Element;
     renderTitle?: (title: string) => React.ReactNode;
 }
-export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
+export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title' | 'labels'> {
     title: string;
     label?: string;
     icon?: ThemedImage;
@@ -174,7 +175,7 @@ export interface QuestionItem {
     listStyle?: 'dash' | 'disk';
     link?: LinkProps;
 }
-export interface QuestionsProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface QuestionsProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme' | 'labels'> {
     items: QuestionItem[];
 }
 export interface QuestionBlockItemProps extends QuestionItem {
@@ -187,7 +188,7 @@ export interface FoldableListItem {
     listStyle?: 'dash' | 'disk';
     link?: LinkProps;
 }
-export interface FoldableListProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface FoldableListProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme' | 'labels'> {
     items: FoldableListItem[];
 }
 export interface FoldableListBlockItemProps extends FoldableListItem {
@@ -208,7 +209,7 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
-export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered' | 'labels'> {
     description?: string;
     /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
@@ -230,8 +231,8 @@ export interface InfoBlockProps {
     sectionsTitle?: string;
     /** @deprecated **/
     links?: Pick<LinkProps, 'text' | 'url'>[];
-    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
-    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
+    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size' | 'labels'>;
+    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size' | 'labels'>;
 }
 export interface TableProps {
     content: string[][];
@@ -248,7 +249,7 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
+export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme' | 'labels'>, WithBorder {
     tabName: string;
     /**
      * @deprecated Use array links from ContentBlockProps instead
@@ -314,7 +315,7 @@ interface ContentLayoutBlockParams {
     textWidth?: ContentTextSize;
 }
 export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
-    textContent: ContentBlockProps;
+    textContent: Omit<ContentBlockProps, 'labels'>;
     fileContent?: FileLinkProps[];
 }
 export type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
@@ -329,6 +330,16 @@ export interface ContentListProps {
     size: ContentSize;
     theme?: ContentTheme;
 }
+export interface ContentLabelProps {
+    text: string;
+    icon?: ThemeSupporting<ImageProps | SVGIcon>;
+    gravityIcon?: ThemeSupporting<GravityIconProps>;
+}
+export interface ContentLabelsProps {
+    labels: ContentLabelProps[];
+    size?: ContentSize;
+    theme?: ContentTheme;
+}
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     titleId?: string;
@@ -342,6 +353,7 @@ export interface ContentBlockProps {
     centered?: boolean;
     theme?: ContentTheme;
     list?: ContentItemProps[];
+    labels?: ContentLabelProps[];
     controlPosition?: 'default' | 'bottom';
 }
 export declare enum PCShareSocialNetwork {
@@ -371,12 +383,16 @@ export interface FormBlockHubspotData {
     hubspot: ThemeSupporting<HubspotFormProps>;
 }
 export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
+export interface FormBlockBackgroundProps extends Omit<BackgroundImageProps, 'style'> {
+    style?: DeviceSupporting<React.CSSProperties>;
+}
 export interface FormBlockProps {
     formData: FormBlockData;
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    background?: ThemeSupporting<BackgroundImageProps>;
+    background?: ThemeSupporting<FormBlockBackgroundProps>;
+    customFormNode?: React.ReactNode;
 }
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;