@evergis/react 4.0.132 → 4.0.133

package/dist/index.js

@@ -3319,6 +3319,22 @@ const CONFIG_PAGE_ID = "page";
  * `grid-template-*`, иначе слот заголовка съест трек и раскладка съедет.
  */
 const TITLE_SLOT_IDS = ["title", "icon", "titleIcon"];
+/**
+ * Универсальный slot-id фонового изображения контейнера.
+ *
+ * Допустим у любого контейнера, кроме `Divider`, и поэтому не перечисляется в наборах слотов —
+ * ровно как слоты заголовка. Узел рисуется отдельным слоем `ContainerBackgroundLayer`
+ * (см. `ContainerBackground`), а не через общий рендер детей.
+ */
+const BG_IMAGE_SLOT_ID = "bgImage";
+/**
+ * Slot-id, которые контейнер читает по `id` сам и не отдаёт ни в общий рендер тела
+ * (`ContainerChildren`), ни в треки сетки (`gridTracks`/`gridTree`).
+ *
+ * Без `bgImage` в этом наборе фон группы отрисовался бы дважды: слоем и обычным ребёнком —
+ * а в сетке ещё и съел бы трек.
+ */
+const NON_TRACK_SLOT_IDS = [...TITLE_SLOT_IDS, BG_IMAGE_SLOT_ID];
 const DEFAULT_PAGES_CONFIG = {
     id: CONFIG_PAGES_ID,
     templateName: exports.ContainerTemplate.Pages,
@@ -4734,19 +4750,83 @@ const DashboardChip$1 = styled(uilibGl.Chip).withConfig({ displayName: "Dashboar
   ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
-const LayersListWrapper = styled(uilibGl.Flex).withConfig({ displayName: "LayersListWrapper", componentId: "sc-10siqjn" }) `
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
+/**
+ * Внутренний отступ корня контейнера при `options.innerPadding`.
+ *
+ * Значение фиксировано намеренно: опция булева, автор конфига включает «отступ от краёв фона»,
+ * а не подбирает число — для произвольного отступа есть `options.padding`.
+ */
+const CONTAINER_INNER_PADDING = "1rem";
+/**
+ * Вылет слоя `bgImage` за края контейнера при `options.outflow` — по бокам и вверх.
+ *
+ * Ровно `padding` карточки контейнера (`ContainerWrapper` в `Dashboard/styled/containers.ts`): картинка
+ * дотягивается до краёв колонки дашборда, а содержимое остаётся на месте. Вниз слой не
+ * вытекает — там начинается следующий контейнер.
+ */
+const BG_IMAGE_OUTFLOW = "1.5rem";
+
+/**
+ * Слой фонового изображения контейнера: единственный ребёнок, который рисуется ПОД содержимым.
+ *
+ * `z-index: -1` работает только внутри собственного stacking-контекста хоста (`isolation: isolate`
+ * в `bgImageHostMixin`): там отрицательный слой ложится поверх фона хоста, но под его контентом.
+ * Без изоляции он ушёл бы под фон ближайшего предка-контекста и пропал.
+ *
+ * `border-radius: inherit` повторяет скругление хоста, `pointer-events: none` оставляет клики
+ * содержимому.
+ *
+ * `options.outflow` растягивает слой отрицательным `inset` — раскладка хоста при этом не
+ * меняется: слой абсолютный, содержимое остаётся в своих границах, вытекает только картинка.
+ * Вылет идёт по бокам и вверх, но НЕ вниз: снизу картинка обязана заканчиваться по краю
+ * контейнера, иначе она наползала бы на следующий контейнер колонки.
+ */
+const ContainerBackgroundLayer = styled.div.withConfig({ displayName: "ContainerBackgroundLayer", componentId: "sc-1ws6t58" }) `
+  position: absolute;
+  inset: ${({ $outflow }) => ($outflow ? `-${BG_IMAGE_OUTFLOW} -${BG_IMAGE_OUTFLOW} 0` : "0")};
+  z-index: -1;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: cover;
+  }
 `;
-const LayerListContainer = styled(uilibGl.Flex).withConfig({ displayName: "LayerListContainer", componentId: "sc-vfvx64" }) `
-  flex-grow: 1;
-  height: 100%;
-  box-sizing: border-box;
-  padding-top: 0.25rem;
+/**
+ * Хост фонового слоя: корень контейнера, у которого в конфиге есть слот `bgImage`.
+ *
+ * Гейт по `$hasBgImage` принципиален — `position: relative` меняет containing block для
+ * абсолютно позиционированных потомков (контролы слайдшоу, подписи прогресса), поэтому
+ * включается только там, где автор конфига действительно попросил фон.
+ *
+ * `$innerPadding` (`options.innerPadding`) — отдельный гейт: отступ содержимого нужен и без
+ * фона, поэтому он не привязан к `$hasBgImage`. `&&` поднимает специфичность до двух классов,
+ * чтобы перебить `padding` из `$sizeCss` и собственных `defaults` контейнера; авторский inline
+ * `style` по-прежнему сильнее — как и задумано.
+ *
+ * Модуль намеренно листовой: его импортирует `Dashboard/styled/containers.ts`, и обратная зависимость
+ * замкнула бы цикл, уронив миксин в TDZ на инициализации.
+ */
+const bgImageHostMixin = styled.css `
+  ${({ $hasBgImage }) => !!$hasBgImage &&
+    styled.css `
+      position: relative;
+      isolation: isolate;
+    `};
+
+  ${({ $innerPadding }) => !!$innerPadding &&
+    styled.css `
+      && {
+        padding: ${CONTAINER_INNER_PADDING};
+      }
+    `};
 `;
 
+/** Корень, тело и обёртка контейнера — и общие для них миксины размеров и отступов. */
 /**
  * Размеры контейнера из конфига.
  *
@@ -4785,7 +4865,7 @@ const noMarginMixin = styled.css `
  * `$sizeTransparent` поэтому работает только на контейнерах, которые ещё не переведены
  * на `useContainerRoot`.
  */
-const ElementValueWrapper = styled.div.withConfig({ displayName: "ElementValueWrapper", componentId: "sc-dnq3zl" }) `
+const ElementValueWrapper = styled.div.withConfig({ displayName: "ElementValueWrapper", componentId: "sc-x3ra9l" }) `
   transition: background-color ${uilibGl.transition.toggle};
 
   ${({ noMargin }) => !!noMargin &&
@@ -4815,14 +4895,15 @@ const ElementValueWrapper = styled.div.withConfig({ displayName: "ElementValueWr
  * Всегда flex-колонка: заголовок и тело раньше были flex-элементами родительского `Container`,
  * и блочная обёртка вернула бы схлопывание вертикальных отступов между ними.
  */
-const ContainerRoot = styled(uilibGl.Flex).withConfig({ displayName: "ContainerRoot", componentId: "sc-2j6lbd" }) `
+const ContainerRoot = styled(uilibGl.Flex).withConfig({ displayName: "ContainerRoot", componentId: "sc-1m2pft5" }) `
   flex-direction: column;
   min-width: 0;
 
   ${sizeCssMixin};
   ${noMarginMixin};
+  ${bgImageHostMixin};
 `;
-const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", componentId: "sc-1o8dsu2" }) `
+const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", componentId: "sc-px8dv0" }) `
   flex-direction: column;
   width: 100%;
 
@@ -4875,8 +4956,9 @@ const Container = styled(uilibGl.Flex).withConfig({ displayName: "Container", co
     `}
 
   ${sizeCssMixin};
+  ${bgImageHostMixin};
 `;
-const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "ContainerWrapper", componentId: "sc-16tb6s0" }) `
+const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "ContainerWrapper", componentId: "sc-1eb7t8v" }) `
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -4897,7 +4979,9 @@ const ContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Contain
       }
     `}
 `;
-const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardChip", componentId: "sc-19j7obx" }) `
+
+/** Каркас дашборда: обёртка страницы, область контента, плейсхолдеры и чип значения. */
+const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardChip", componentId: "sc-a3pqro" }) `
   margin: 0 0.25rem 0.25rem 0;
   background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
   border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
@@ -4913,7 +4997,7 @@ const DashboardChip = styled(uilibGl.Chip).withConfig({ displayName: "DashboardC
     color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.icon : $fontColor || "#fff"};
   }
 `;
-const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholderWrap", componentId: "sc-anwihw" }) `
+const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholderWrap", componentId: "sc-qnoieo" }) `
   flex-grow: 1;
   flex-direction: column;
   justify-content: center;
@@ -4921,7 +5005,7 @@ const DashboardPlaceholderWrap = styled(uilibGl.Flex).withConfig({ displayName:
   width: 100%;
   margin-bottom: 2rem;
 `;
-const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholder", componentId: "sc-jry8vp" }) `
+const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "DashboardPlaceholder", componentId: "sc-18za1l3" }) `
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -4954,7 +5038,7 @@ const DashboardPlaceholder = styled(uilibGl.Flex).withConfig({ displayName: "Das
     }
   }
 `;
-const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "DashboardWrapper", componentId: "sc-100ipup" }) `
+const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "DashboardWrapper", componentId: "sc-tnxl47" }) `
   flex-direction: column;
   flex-wrap: nowrap;
   flex-grow: 1;
@@ -4967,13 +5051,28 @@ const DashboardWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Dashboa
       margin-top: -0.35rem;
     `}
 `;
-const DashboardContent = styled(uilibGl.Flex).withConfig({ displayName: "DashboardContent", componentId: "sc-77il9k" }) `
+const DashboardContent = styled(uilibGl.Flex).withConfig({ displayName: "DashboardContent", componentId: "sc-cqvhte" }) `
   flex-grow: 1;
   width: 100%;
   padding: 1.5rem 1.5rem 2rem;
   overflow-y: auto;
   scrollbar-gutter: stable;
 `;
+
+const LayersListWrapper = styled(uilibGl.Flex).withConfig({ displayName: "LayersListWrapper", componentId: "sc-10siqjn" }) `
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+`;
+const LayerListContainer = styled(uilibGl.Flex).withConfig({ displayName: "LayerListContainer", componentId: "sc-vfvx64" }) `
+  flex-grow: 1;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 0.25rem;
+`;
+
+/** Презентационный режим: карточки-панели поверх дашборда и левая панель со списком слоёв. */
 const PresentationWrapperCss = styled.css `
   margin-bottom: 0.75rem;
   padding: 1.5rem;
@@ -4982,16 +5081,16 @@ const PresentationWrapperCss = styled.css `
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
   box-shadow: ${uilibGl.shadows.raised};
 `;
-const PresentationWrapper = styled.div.withConfig({ displayName: "PresentationWrapper", componentId: "sc-891z9z" }) `
+const PresentationWrapper = styled.div.withConfig({ displayName: "PresentationWrapper", componentId: "sc-15hokqp" }) `
   ${PresentationWrapperCss};
   position: relative;
   z-index: 1;
 `;
-const PresentationPanelWrapper = styled(PresentationWrapper).withConfig({ displayName: "PresentationPanelWrapper", componentId: "sc-1ptpbt9" }) `
+const PresentationPanelWrapper = styled(PresentationWrapper).withConfig({ displayName: "PresentationPanelWrapper", componentId: "sc-qy34j6" }) `
   margin-top: 0.75rem;
   transition: background-color ${uilibGl.transition.toggle};
 `;
-const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHeader", componentId: "sc-182b7wg" }) `
+const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHeader", componentId: "sc-iysakx" }) `
   margin: -1.5rem -1.5rem 0 -1.5rem;
   padding: 1.5rem;
   // background: url(images.presentationHeader) 0 0 no-repeat;
@@ -5003,7 +5102,7 @@ const PresentationHeader = styled.div.withConfig({ displayName: "PresentationHea
       padding-top: 7rem;
     `};
 `;
-const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderTools", componentId: "sc-dms7fm" }) `
+const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderTools", componentId: "sc-16o9l28" }) `
   justify-content: space-between;
   align-items: center;
   margin-bottom: -0.5rem;
@@ -5021,7 +5120,7 @@ const PresentationHeaderTools = styled(uilibGl.Flex).withConfig({ displayName: "
     }
   }
 `;
-const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGroupList", componentId: "sc-19uothl" }) `
+const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGroupList", componentId: "sc-1o4tem9" }) `
   flex-direction: column;
   height: 100%;
   flex-wrap: nowrap;
@@ -5034,8 +5133,8 @@ const LayerGroupList = styled(uilibGl.Flex).withConfig({ displayName: "LayerGrou
     flex-grow: 1;
   }
 `;
-const PresentationHeaderButtons = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderButtons", componentId: "sc-c24t7n" }) ``;
-const PresentationPanelContainer = styled.div.withConfig({ displayName: "PresentationPanelContainer", componentId: "sc-17q0jzw" }) `
+const PresentationHeaderButtons = styled(uilibGl.Flex).withConfig({ displayName: "PresentationHeaderButtons", componentId: "sc-h3z1ud" }) ``;
+const PresentationPanelContainer = styled.div.withConfig({ displayName: "PresentationPanelContainer", componentId: "sc-rngq9i" }) `
   position: absolute;
   top: 0;
   left: calc(${({ left }) => left || 0}px + 0.75rem);
@@ -5104,7 +5203,9 @@ const PresentationPanelContainer = styled.div.withConfig({ displayName: "Present
     }
   }
 `;
-const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName: "DataSourceErrorContainer", componentId: "sc-nh93ry" }) `
+
+/** Общее для нескольких разделов: ошибка источника данных, подпись атрибута, кнопки объекта. */
+const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName: "DataSourceErrorContainer", componentId: "sc-1drfyq0" }) `
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
@@ -5123,12 +5224,12 @@ const DataSourceErrorContainer = styled(uilibGl.Flex).withConfig({ displayName:
     }
   }
 `;
-const AttributeLabel = styled(uilibGl.Description).withConfig({ displayName: "AttributeLabel", componentId: "sc-9u3noy" }) `
+const AttributeLabel = styled(uilibGl.Description).withConfig({ displayName: "AttributeLabel", componentId: "sc-96skzy" }) `
   margin-top: 0 !important;
   margin-bottom: ${({ forCheckbox }) => forCheckbox ? "0.75rem" : "0.25rem"} !important;
   padding-left: ${({ isEdit }) => (isEdit ? "0.5rem" : "0")};
 `;
-const FeatureControls = styled(uilibGl.Flex).withConfig({ displayName: "FeatureControls", componentId: "sc-1wenq0r" }) `
+const FeatureControls = styled(uilibGl.Flex).withConfig({ displayName: "FeatureControls", componentId: "sc-zlqfd7" }) `
   align-items: center;
   gap: 1rem;
   flex-wrap: nowrap;
@@ -5643,124 +5744,459 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
     };
 };
 
-const useRenderContainerItem = (type, renderElement) => {
-    const { config, layerInfo, selectedTabId, attributes } = useWidgetContext(type);
-    return React.useCallback((elementConfig, attribute) => {
-        const { id, options, style, children } = elementConfig || {};
-        const { hideEmpty, innerTemplateStyle } = options || {};
-        const hasUnits = children?.some(item => item.id === "units");
-        const iconIndex = children?.findIndex(item => item.id === "icon");
-        const icon = children?.[iconIndex];
-        const hasIcon = !!icon;
-        const elementChildren = elementConfig?.children?.map(child => ({
-            type: "attributeValue",
-            ...child,
-            attributeName: attribute,
-            options: { noUnits: hasUnits, ...child.options },
-        }));
-        const attr = getAttributeConfigurationByName(getAttributesConfiguration(layerInfo).attributes, attribute);
-        if (hasIcon) {
-            elementChildren[iconIndex] = {
-                ...elementChildren[iconIndex],
-                ...getAttributeIconElement(attr?.icon),
-                attributeName: null,
-            };
-        }
-        const render = attribute
-            ? getRenderElement({
-                config,
-                elementConfig: {
-                    ...elementConfig,
-                    children: elementChildren,
-                },
-                selectedTabId,
-                attributes,
-                layerInfo,
-                type,
-            })
-            : renderElement;
-        const value = render({ id: "value" });
+const parseAttachments = (raw) => {
+    if (!raw)
+        return [];
+    if (Array.isArray(raw))
+        return raw;
+    if (typeof raw !== "string")
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+};
+const attachmentsFromFeatures = (features, mapping = {}) => {
+    if (!features?.length)
+        return [];
+    const { attributeLink = "link", attributeName = "name", attributeMime = "mimeType", attributeDate = "date", } = mapping;
+    return features
+        .map(feature => {
+        const link = feature.properties?.[attributeLink];
+        if (!link)
+            return null;
         return {
-            id,
-            value,
-            hideEmpty,
-            style: innerTemplateStyle || style,
-            hasIcon,
-            hasUnits,
-            render,
+            link,
+            name: feature.properties?.[attributeName] ?? link,
+            mimeType: feature.properties?.[attributeMime] ?? "",
+            date: feature.properties?.[attributeDate],
+            isExternal: /^https?:\/\//.test(link),
         };
-    }, [config, layerInfo, selectedTabId, attributes, type, renderElement]);
+    })
+        .filter(Boolean);
 };
 
-const customModes = MapboxDraw.modes;
-const StaticMode = {};
-const InvisibleMode = {};
-StaticMode.onSetup = function () {
-    this.setActionableState(undefined);
-    return {};
-};
-StaticMode.toDisplayFeatures = function (state, geojson, display) {
-    display(geojson);
+const useAttachmentItems = ({ type, elementConfig, valueOverride, }) => {
+    const { attributes, dataSources } = useWidgetContext(type);
+    const { children, options } = elementConfig || {};
+    const { relatedDataSource, controls } = options || {};
+    const valueElement = React.useMemo(() => children?.find(({ id }) => id === "value"), [children]);
+    const attributeName = React.useMemo(() => {
+        const candidate = valueElement?.attributeName ?? elementConfig?.attributeName;
+        return Array.isArray(candidate) ? candidate[0] : candidate;
+    }, [valueElement, elementConfig]);
+    const rawValue = React.useMemo(() => {
+        if (valueOverride !== undefined)
+            return valueOverride;
+        if (!attributeName)
+            return undefined;
+        return attributes?.find(item => item.attributeName === attributeName)?.value;
+    }, [valueOverride, attributeName, attributes]);
+    const items = React.useMemo(() => {
+        if (relatedDataSource) {
+            const dataSource = dataSources?.find(({ name }) => name === relatedDataSource);
+            const mapping = controls?.[0];
+            return attachmentsFromFeatures(dataSource?.features, mapping);
+        }
+        return parseAttachments(rawValue);
+    }, [relatedDataSource, dataSources, controls, rawValue]);
+    return {
+        items,
+        attributeName,
+        rawValue,
+    };
 };
-InvisibleMode.onSetup = function () {
-    this.setActionableState(undefined);
-    return {};
+
+const useGlobalContext = () => {
+    const { t, language, themeName, api, ewktGeometry, ewktExtent, zoomLevel, notification } = React.useContext(GlobalContext) || {};
+    const translate = React.useCallback((value, options) => {
+        if (t)
+            return t(value, options);
+        return options?.defaultValue ?? value;
+    }, [t]);
+    return React.useMemo(() => ({
+        t: translate,
+        language,
+        themeName,
+        api,
+        ewktGeometry,
+        ewktExtent,
+        zoomLevel,
+        notification,
+    }), [language, translate, api, ewktGeometry, ewktExtent, zoomLevel, themeName, notification]);
 };
-InvisibleMode.toDisplayFeatures = function () { };
-customModes.static = StaticMode;
-customModes.invisible = InvisibleMode;
 
-const customStyles = [
-    {
-        id: "gl-draw-point",
-        type: "circle",
-        filter: ["all", ["==", "$type", "Point"]],
-        paint: {
-            "circle-radius": 5,
-            "circle-color": "#D20C0C",
-            "circle-stroke-color": "#FFFFFF",
-            "circle-stroke-width": 3,
-            "circle-stroke-opacity": 0.3,
-        },
-    },
-    {
-        id: "highlight-inactive-points",
-        type: "circle",
-        filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "false"]],
-        paint: {
-            "circle-radius": 5,
-            "circle-color": "#D20C0C",
-            "circle-stroke-color": "#FFFFFF",
-            "circle-stroke-width": 3,
-            "circle-stroke-opacity": 0.3,
-        },
-    },
-    {
-        id: "highlight-active-points",
-        type: "circle",
-        filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "true"]],
-        paint: {
-            "circle-radius": 3,
-            "circle-color": "#fbb03b",
-            "circle-stroke-color": "#FFFFFF",
-            "circle-stroke-width": 1,
-            "circle-stroke-opacity": 0.3,
-        },
-    },
-    {
-        id: "gl-draw-polygon-fill-static",
-        type: "fill",
-        filter: ["all", ["==", "$type", "Polygon"]],
-        paint: {
-            "fill-color": "#D20C0C",
-            "fill-outline-color": "#D20C0C",
-            "fill-opacity": 0.1,
-        },
-    },
-    {
-        id: "gl-draw-line",
-        type: "line",
-        filter: ["all", ["==", "$type", "LineString"]],
+const GRID_TILE_SIZE = "4.5rem";
+const LIST_ICON_SIZE = "1.5rem";
+const JPG_MIME_TYPE = "image/jpeg";
+const PNG_MIME_TYPE = "image/png";
+const IMAGE_MIME_TYPES = [
+    "image/apng",
+    "image/avif",
+    "image/gif",
+    "image/jpeg",
+    "image/png",
+    "image/svg+xml",
+    "image/webp",
+];
+const XLSX_MIME_TYPES = [
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+];
+const PDF_MIME_TYPE = "application/pdf";
+const DOCX_MIME_TYPES = [
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];
+const CSV_MIME_TYPE = "text/csv";
+const JSON_MIME_TYPE = "application/json";
+const TXT_MIME_TYPE = "text/plain";
+const PPTX_MIME_TYPES = [
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+];
+const SHP_MIME_TYPE = "application/octet-stream";
+const KML_MIME_TYPE = "application/octet-stream";
+const ZIP_MIME_TYPE = "application/zip";
+const PYTHON_MIME_TYPES = ["application/x-python-code", "text/x-python"];
+var AddAttachmentSource;
+(function (AddAttachmentSource) {
+    AddAttachmentSource["Pc"] = "pc";
+    AddAttachmentSource["Catalog"] = "catalog";
+    AddAttachmentSource["Link"] = "link";
+})(AddAttachmentSource || (AddAttachmentSource = {}));
+
+var FileType;
+(function (FileType) {
+    FileType[FileType["UNKNOWN"] = 0] = "UNKNOWN";
+    FileType[FileType["XLSX"] = 1] = "XLSX";
+    FileType[FileType["PDF"] = 2] = "PDF";
+    FileType[FileType["CSV"] = 3] = "CSV";
+    FileType[FileType["DOCX"] = 4] = "DOCX";
+    FileType[FileType["IMAGE"] = 5] = "IMAGE";
+    FileType[FileType["TXT"] = 6] = "TXT";
+    FileType[FileType["JSON"] = 7] = "JSON";
+    FileType[FileType["KML"] = 8] = "KML";
+    FileType[FileType["PPTX"] = 9] = "PPTX";
+    FileType[FileType["SHP"] = 10] = "SHP";
+    FileType[FileType["ZIP"] = 11] = "ZIP";
+    FileType[FileType["JPEG"] = 12] = "JPEG";
+    FileType[FileType["JPG"] = 13] = "JPG";
+    FileType[FileType["PNG"] = 14] = "PNG";
+    FileType[FileType["PYTHON"] = 15] = "PYTHON";
+})(FileType || (FileType = {}));
+const IMAGE_FILE_TYPES = [
+    FileType.IMAGE,
+    FileType.JPEG,
+    FileType.JPG,
+    FileType.PNG,
+];
+
+const getFileType = (mimeType = "", name = "") => {
+    if (mimeType === PNG_MIME_TYPE)
+        return FileType.PNG;
+    if (mimeType === JPG_MIME_TYPE)
+        return FileType.JPG;
+    if (IMAGE_MIME_TYPES.includes(mimeType))
+        return FileType.IMAGE;
+    if (XLSX_MIME_TYPES.includes(mimeType))
+        return FileType.XLSX;
+    if (DOCX_MIME_TYPES.includes(mimeType))
+        return FileType.DOCX;
+    if (mimeType === CSV_MIME_TYPE)
+        return FileType.CSV;
+    if (mimeType === PDF_MIME_TYPE)
+        return FileType.PDF;
+    if (mimeType === JSON_MIME_TYPE)
+        return FileType.JSON;
+    if (mimeType === KML_MIME_TYPE && (name.endsWith(".kml") || name.endsWith(".kmz"))) {
+        return FileType.KML;
+    }
+    if (PYTHON_MIME_TYPES.includes(mimeType))
+        return FileType.PYTHON;
+    if (mimeType === TXT_MIME_TYPE && name.endsWith(".py"))
+        return FileType.PYTHON;
+    if (mimeType === TXT_MIME_TYPE)
+        return FileType.TXT;
+    if (PPTX_MIME_TYPES.includes(mimeType))
+        return FileType.PPTX;
+    if (mimeType === SHP_MIME_TYPE && name.endsWith(".shp"))
+        return FileType.SHP;
+    if (mimeType === ZIP_MIME_TYPE)
+        return FileType.ZIP;
+    return name.endsWith(".py") ? FileType.PYTHON : FileType.UNKNOWN;
+};
+
+var img$j = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2300AAFF'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cpath id='Vector_3' d='M9.84902 10.0353C9.69434 10.0353 9.55605 10.0112 9.43418 9.96318C9.3123 9.91396 9.20918 9.84658 9.1248 9.76104C9.0416 9.67549 8.97773 9.57705 8.9332 9.46572C8.88984 9.35439 8.86816 9.23662 8.86816 9.1124V9.04561C8.86816 8.90615 8.8875 8.77725 8.92617 8.65889C8.96484 8.53936 9.02227 8.43506 9.09844 8.346C9.17461 8.25693 9.27012 8.18779 9.38496 8.13857C9.4998 8.08818 9.6334 8.06299 9.78574 8.06299C9.92051 8.06299 10.0412 8.08467 10.1479 8.12803C10.2545 8.17139 10.3447 8.2335 10.4186 8.31436C10.4936 8.39521 10.5504 8.49307 10.5891 8.60791C10.6289 8.72275 10.6488 8.85166 10.6488 8.99463V9.23545H9.09492V8.86455H10.0705V8.81885C10.0717 8.75557 10.0605 8.70166 10.0371 8.65713C10.0148 8.6126 9.98203 8.57861 9.93867 8.55518C9.89531 8.53174 9.84258 8.52002 9.78047 8.52002C9.71602 8.52002 9.6627 8.53408 9.62051 8.56221C9.57949 8.59033 9.54727 8.629 9.52383 8.67822C9.50156 8.72627 9.48574 8.78193 9.47637 8.84521C9.46699 8.9085 9.46231 8.97529 9.46231 9.04561V9.1124C9.46231 9.18271 9.47168 9.24658 9.49043 9.304C9.51035 9.36143 9.53848 9.41064 9.5748 9.45166C9.6123 9.4915 9.65684 9.52256 9.7084 9.54482C9.76113 9.56709 9.8209 9.57822 9.8877 9.57822C9.96855 9.57822 10.0482 9.56299 10.1268 9.53252C10.2053 9.50205 10.2727 9.45166 10.3289 9.38135L10.5979 9.70127C10.5592 9.75635 10.5041 9.80967 10.4326 9.86123C10.3623 9.91279 10.2779 9.95498 10.1795 9.98779C10.0811 10.0194 9.9709 10.0353 9.84902 10.0353Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.4623 7.2998V9.9998H7.86816V7.2998H8.4623Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.17773 10.0001H5.58184V8.04893C5.58184 7.879 5.61699 7.73604 5.6873 7.62002C5.75879 7.50283 5.86133 7.41436 5.99492 7.35459C6.12852 7.29365 6.29023 7.26318 6.48008 7.26318C6.58789 7.26318 6.6916 7.27256 6.79121 7.29131C6.89082 7.31006 6.99395 7.33467 7.10059 7.36514L7.01797 7.83271C6.94883 7.81396 6.87617 7.79639 6.8 7.77998C6.725 7.76357 6.63066 7.75537 6.51699 7.75537C6.41035 7.75537 6.32715 7.78057 6.26738 7.83096C6.20762 7.88135 6.17773 7.954 6.17773 8.04893V10.0001ZM6.55039 8.09814V8.50947H5.30762V8.09814H6.55039ZM7.37129 8.09814V10.0001H6.77715V8.09814H7.37129Z' fill='white'/%3e%3c/g%3e%3c/svg%3e";
+
+var img$i = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2347C782'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='CSV'%3e%3cpath id='Vector_3' d='M10.3816 9.39736L10.9143 7.44092H11.6051L10.742 10.0003H10.2955L10.3816 9.39736ZM9.89824 7.44092L10.4309 9.39736L10.5205 10.0003H10.0687L9.21094 7.44092H9.89824Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.37852 9.32002C8.37852 9.28018 8.37266 9.24443 8.36094 9.21279C8.34922 9.17998 8.32754 9.14951 8.2959 9.12139C8.26426 9.09326 8.21855 9.06514 8.15879 9.03701C8.10019 9.00771 8.02285 8.97725 7.92676 8.94561C7.81426 8.90811 7.70586 8.86592 7.60156 8.81904C7.49727 8.771 7.4041 8.71533 7.32207 8.65205C7.24004 8.5876 7.175 8.5126 7.12695 8.42705C7.07891 8.34033 7.05488 8.23955 7.05488 8.12471C7.05488 8.01455 7.07949 7.91553 7.12871 7.82764C7.17793 7.73857 7.24648 7.66299 7.33437 7.60088C7.42344 7.5376 7.52773 7.48955 7.64727 7.45674C7.7668 7.42275 7.89746 7.40576 8.03926 7.40576C8.22676 7.40576 8.39199 7.43857 8.53496 7.5042C8.6791 7.56865 8.7916 7.66064 8.87246 7.78018C8.95449 7.89854 8.99551 8.03857 8.99551 8.20029H8.38203C8.38203 8.13584 8.36855 8.079 8.3416 8.02979C8.31582 7.98057 8.27656 7.94189 8.22383 7.91377C8.17109 7.88564 8.10488 7.87158 8.0252 7.87158C7.94785 7.87158 7.88281 7.8833 7.83008 7.90674C7.77734 7.93018 7.7375 7.96182 7.71055 8.00166C7.68359 8.04033 7.67012 8.08311 7.67012 8.12998C7.67012 8.16865 7.68066 8.20381 7.70176 8.23545C7.72402 8.26592 7.75508 8.29463 7.79492 8.32158C7.83594 8.34854 7.88516 8.37432 7.94258 8.39893C8.00117 8.42354 8.0668 8.44756 8.13945 8.471C8.27539 8.51436 8.39609 8.56299 8.50156 8.61689C8.6082 8.66963 8.69785 8.72998 8.77051 8.79795C8.84434 8.86475 8.9 8.94092 8.9375 9.02646C8.97617 9.11201 8.99551 9.20869 8.99551 9.3165C8.99551 9.43135 8.97324 9.5333 8.92871 9.62236C8.88418 9.71143 8.82031 9.78701 8.73711 9.84912C8.65391 9.91006 8.5543 9.95635 8.43828 9.98799C8.32227 10.0196 8.19277 10.0354 8.0498 10.0354C7.91855 10.0354 7.78906 10.019 7.66133 9.98623C7.53477 9.95225 7.41992 9.90068 7.3168 9.83154C7.21367 9.76123 7.13105 9.67158 7.06894 9.5626C7.00801 9.45244 6.97754 9.32178 6.97754 9.17061H7.59629C7.59629 9.24561 7.60625 9.30889 7.62617 9.36045C7.64609 9.41201 7.67539 9.45361 7.71406 9.48525C7.75273 9.51572 7.8002 9.53799 7.85645 9.55205C7.9127 9.56494 7.97715 9.57139 8.0498 9.57139C8.12832 9.57139 8.1916 9.56025 8.23965 9.53799C8.2877 9.51455 8.32285 9.48408 8.34512 9.44658C8.36738 9.40791 8.37852 9.36572 8.37852 9.32002Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.05293 9.1335H6.66816C6.65996 9.31162 6.61191 9.46865 6.52402 9.60459C6.43613 9.74053 6.31426 9.84658 6.1584 9.92275C6.00371 9.99775 5.8209 10.0353 5.60996 10.0353C5.43887 10.0353 5.28594 10.0065 5.15117 9.94912C5.01758 9.8917 4.90391 9.80908 4.81016 9.70127C4.71758 9.59346 4.64668 9.46279 4.59746 9.30928C4.54941 9.15576 4.52539 8.98291 4.52539 8.79072V8.65186C4.52539 8.45967 4.55059 8.28682 4.60098 8.1333C4.65254 7.97861 4.7252 7.84736 4.81895 7.73955C4.91387 7.63057 5.02754 7.54736 5.15996 7.48994C5.29238 7.43252 5.43945 7.40381 5.60117 7.40381C5.82383 7.40381 6.01191 7.44365 6.16543 7.52334C6.31895 7.60303 6.43789 7.7126 6.52227 7.85205C6.60664 7.99033 6.65645 8.14795 6.67168 8.3249H6.05645C6.0541 8.22881 6.0377 8.14854 6.00723 8.08408C5.97676 8.01846 5.92871 7.96924 5.86309 7.93643C5.79746 7.90361 5.71016 7.88721 5.60117 7.88721C5.525 7.88721 5.45879 7.90127 5.40254 7.92939C5.34629 7.95752 5.29941 8.00205 5.26191 8.06299C5.22441 8.12393 5.19629 8.20303 5.17754 8.30029C5.15996 8.39639 5.15117 8.5124 5.15117 8.64834V8.79072C5.15117 8.92666 5.15938 9.04268 5.17578 9.13877C5.19219 9.23486 5.21855 9.31338 5.25488 9.37432C5.29121 9.43525 5.33809 9.48037 5.39551 9.50967C5.4541 9.53779 5.52559 9.55186 5.60996 9.55186C5.70371 9.55186 5.78281 9.53721 5.84727 9.50791C5.91172 9.47744 5.96152 9.43174 5.99668 9.3708C6.03184 9.30869 6.05059 9.22959 6.05293 9.1335Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$h = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%232B7CD3'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='DOCX'%3e%3cpath id='Vector_3' d='M11.3209 7.44092L11.7393 8.2917L12.1576 7.44092H12.8607L12.1471 8.71006L12.8801 10.0003H12.1699L11.7393 9.13369L11.3086 10.0003H10.5967L11.3314 8.71006L10.616 7.44092H11.3209Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.77754 9.1335H10.3928C10.3846 9.31162 10.3365 9.46865 10.2486 9.60459C10.1607 9.74053 10.0389 9.84658 9.88301 9.92275C9.72832 9.99775 9.54551 10.0353 9.33457 10.0353C9.16348 10.0353 9.01055 10.0065 8.87578 9.94912C8.74219 9.8917 8.62852 9.80908 8.53477 9.70127C8.44219 9.59346 8.37129 9.46279 8.32207 9.30928C8.27402 9.15576 8.25 8.98291 8.25 8.79072V8.65186C8.25 8.45967 8.2752 8.28682 8.32559 8.1333C8.37715 7.97861 8.4498 7.84736 8.54355 7.73955C8.63848 7.63057 8.75215 7.54736 8.88457 7.48994C9.01699 7.43252 9.16406 7.40381 9.32578 7.40381C9.54844 7.40381 9.73652 7.44365 9.89004 7.52334C10.0436 7.60303 10.1625 7.7126 10.2469 7.85205C10.3313 7.99033 10.3811 8.14795 10.3963 8.3249H9.78105C9.77871 8.22881 9.7623 8.14854 9.73184 8.08408C9.70137 8.01846 9.65332 7.96924 9.5877 7.93643C9.52207 7.90361 9.43477 7.88721 9.32578 7.88721C9.24961 7.88721 9.1834 7.90127 9.12715 7.92939C9.0709 7.95752 9.02402 8.00205 8.98652 8.06299C8.94902 8.12393 8.9209 8.20303 8.90215 8.30029C8.88457 8.39639 8.87578 8.5124 8.87578 8.64834V8.79072C8.87578 8.92666 8.88398 9.04268 8.90039 9.13877C8.9168 9.23486 8.94316 9.31338 8.97949 9.37432C9.01582 9.43525 9.0627 9.48037 9.12012 9.50967C9.17871 9.53779 9.2502 9.55186 9.33457 9.55186C9.42832 9.55186 9.50742 9.53721 9.57188 9.50791C9.63633 9.47744 9.68613 9.43174 9.72129 9.3708C9.75645 9.30869 9.7752 9.22959 9.77754 9.1335Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.90176 8.66963V8.77334C7.90176 8.96904 7.87422 9.14482 7.81914 9.30068C7.76523 9.45537 7.68848 9.58779 7.58887 9.69795C7.48926 9.80693 7.37148 9.89072 7.23555 9.94932C7.09961 10.0067 6.94961 10.0354 6.78555 10.0354C6.62031 10.0354 6.46914 10.0067 6.33203 9.94932C6.19609 9.89072 6.07773 9.80693 5.97695 9.69795C5.87734 9.58779 5.8 9.45537 5.74492 9.30068C5.69102 9.14482 5.66406 8.96904 5.66406 8.77334V8.66963C5.66406 8.47393 5.69102 8.29814 5.74492 8.14229C5.8 7.98643 5.87676 7.854 5.9752 7.74502C6.0748 7.63486 6.19258 7.55107 6.32852 7.49365C6.46563 7.43506 6.6168 7.40576 6.78203 7.40576C6.94609 7.40576 7.09609 7.43506 7.23203 7.49365C7.36914 7.55107 7.4875 7.63486 7.58711 7.74502C7.68672 7.854 7.76406 7.98643 7.81914 8.14229C7.87422 8.29814 7.90176 8.47393 7.90176 8.66963ZM7.27598 8.77334V8.66611C7.27598 8.53955 7.26484 8.42822 7.24258 8.33213C7.22148 8.23486 7.18984 8.15342 7.14766 8.08779C7.10547 8.02217 7.05332 7.97295 6.99121 7.94014C6.93027 7.90615 6.86055 7.88916 6.78203 7.88916C6.7 7.88916 6.62852 7.90615 6.56758 7.94014C6.50664 7.97295 6.45566 8.02217 6.41465 8.08779C6.37363 8.15342 6.34258 8.23486 6.32148 8.33213C6.30156 8.42822 6.2916 8.53955 6.2916 8.66611V8.77334C6.2916 8.89873 6.30156 9.01006 6.32148 9.10732C6.34258 9.20342 6.37363 9.28486 6.41465 9.35166C6.45684 9.41846 6.5084 9.46885 6.56934 9.50283C6.63145 9.53682 6.70352 9.55381 6.78555 9.55381C6.86406 9.55381 6.93379 9.53682 6.99473 9.50283C7.05566 9.46885 7.10664 9.41846 7.14766 9.35166C7.18984 9.28486 7.22148 9.20342 7.24258 9.10732C7.26484 9.01006 7.27598 8.89873 7.27598 8.77334Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.13711 10.0003H3.56934L3.57285 9.52568H4.13711C4.2543 9.52568 4.35332 9.49756 4.43418 9.44131C4.51621 9.38506 4.57832 9.30127 4.62051 9.18994C4.66387 9.07744 4.68555 8.93916 4.68555 8.7751V8.66436C4.68555 8.54131 4.67324 8.4335 4.64863 8.34092C4.6252 8.24717 4.59004 8.16924 4.54316 8.10713C4.49629 8.04385 4.4377 7.99639 4.36738 7.96475C4.29824 7.93311 4.21855 7.91729 4.12832 7.91729H3.55879V7.44092H4.12832C4.30176 7.44092 4.46055 7.4708 4.60469 7.53057C4.75 7.58916 4.87539 7.67354 4.98086 7.78369C5.0875 7.89268 5.16953 8.02217 5.22695 8.17217C5.28555 8.321 5.31484 8.48623 5.31484 8.66787V8.7751C5.31484 8.95557 5.28555 9.1208 5.22695 9.2708C5.16953 9.4208 5.08809 9.55029 4.98262 9.65928C4.87715 9.76826 4.75234 9.85264 4.6082 9.9124C4.46523 9.971 4.3082 10.0003 4.13711 10.0003ZM3.92266 7.44092V10.0003H3.30566V7.44092H3.92266Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$g = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23FF9C54'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JPEG'%3e%3cpath id='Vector_3' d='M12.4043 8.63301V9.68418C12.3609 9.73223 12.2941 9.78379 12.2039 9.83887C12.1148 9.89277 12.0023 9.93906 11.8664 9.97773C11.7305 10.0164 11.5705 10.0357 11.3865 10.0357C11.2166 10.0357 11.0625 10.0088 10.9242 9.95488C10.7859 9.8998 10.667 9.81953 10.5674 9.71406C10.4689 9.60742 10.3928 9.47734 10.3389 9.32383C10.2861 9.16914 10.2598 8.99219 10.2598 8.79297V8.65059C10.2598 8.45137 10.2867 8.27441 10.3406 8.11973C10.3945 7.96504 10.4701 7.83496 10.5674 7.72949C10.6658 7.62285 10.7813 7.54199 10.9137 7.48691C11.0473 7.43184 11.1938 7.4043 11.3531 7.4043C11.5887 7.4043 11.7803 7.4418 11.9279 7.5168C12.0756 7.59063 12.1875 7.69316 12.2637 7.82441C12.3398 7.95449 12.3861 8.10508 12.4025 8.27617H11.8102C11.7984 8.1918 11.7762 8.12031 11.7434 8.06172C11.7117 8.00195 11.666 7.95684 11.6063 7.92637C11.5465 7.89473 11.4691 7.87891 11.3742 7.87891C11.3004 7.87891 11.233 7.89473 11.1721 7.92637C11.1123 7.95801 11.0613 8.00605 11.0191 8.07051C10.977 8.13379 10.9441 8.21348 10.9207 8.30957C10.8984 8.40566 10.8873 8.51816 10.8873 8.64707V8.79297C10.8873 8.9207 10.8979 9.03262 10.9189 9.12871C10.9412 9.2248 10.974 9.30508 11.0174 9.36953C11.0619 9.43281 11.1182 9.48086 11.1861 9.51367C11.2553 9.54531 11.3367 9.56113 11.4305 9.56113C11.4961 9.56113 11.5523 9.55586 11.5992 9.54531C11.6461 9.53359 11.6848 9.51953 11.7152 9.50312C11.7469 9.48555 11.7709 9.46914 11.7873 9.45391V9.05664H11.3584V8.63301H12.4043Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.95762 9.52617V10.0008H8.59355V9.52617H9.95762ZM8.81328 7.44141V10.0008H8.19629V7.44141H8.81328ZM9.78184 8.45742V8.91621H8.59355V8.45742H9.78184ZM9.96289 7.44141V7.91777H8.59355V7.44141H9.96289Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.77227 9.13242H6.13594V8.65605H6.77227C6.85898 8.65605 6.9293 8.64141 6.9832 8.61211C7.03711 8.58281 7.07637 8.54238 7.10098 8.49082C7.12676 8.43809 7.13965 8.37891 7.13965 8.31328C7.13965 8.24297 7.12676 8.17793 7.10098 8.11816C7.07637 8.0584 7.03711 8.01035 6.9832 7.97402C6.9293 7.93652 6.85898 7.91777 6.77227 7.91777H6.36797V10.0008H5.75098V7.44141H6.77227C6.97734 7.44141 7.15371 7.47891 7.30137 7.55391C7.4502 7.62891 7.56445 7.73203 7.64414 7.86328C7.72383 7.99336 7.76367 8.14219 7.76367 8.30977C7.76367 8.475 7.72383 8.61914 7.64414 8.74219C7.56445 8.86523 7.4502 8.96133 7.30137 9.03047C7.15371 9.09844 6.97734 9.13242 6.77227 9.13242Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.64395 9.19746V7.44141H5.25918V9.19746C5.25918 9.36855 5.21992 9.5168 5.14141 9.64219C5.06406 9.76758 4.95859 9.86484 4.825 9.93398C4.69258 10.002 4.54375 10.0359 4.37852 10.0359C4.20742 10.0359 4.05508 10.0072 3.92148 9.9498C3.78906 9.89238 3.68477 9.80391 3.60859 9.68437C3.53359 9.56484 3.49609 9.4125 3.49609 9.22734H4.11484C4.11484 9.31406 4.1248 9.38203 4.14473 9.43125C4.16465 9.4793 4.19395 9.51328 4.23262 9.5332C4.27246 9.55195 4.32109 9.56133 4.37852 9.56133C4.43477 9.56133 4.48223 9.54727 4.5209 9.51914C4.56074 9.48984 4.59121 9.44824 4.6123 9.39434C4.6334 9.33926 4.64395 9.27363 4.64395 9.19746Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$f = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23FF9C54'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JPG'%3e%3cpath id='Vector_3' d='M11.3467 8.63301V9.68418C11.3033 9.73223 11.2365 9.78379 11.1463 9.83887C11.0572 9.89277 10.9447 9.93906 10.8088 9.97773C10.6729 10.0164 10.5129 10.0357 10.3289 10.0357C10.159 10.0357 10.0049 10.0088 9.8666 9.95488C9.72832 9.8998 9.60938 9.81953 9.50977 9.71406C9.41133 9.60742 9.33516 9.47734 9.28125 9.32383C9.22852 9.16914 9.20215 8.99219 9.20215 8.79297V8.65059C9.20215 8.45137 9.2291 8.27441 9.28301 8.11973C9.33691 7.96504 9.4125 7.83496 9.50977 7.72949C9.6082 7.62285 9.72363 7.54199 9.85605 7.48691C9.98965 7.43184 10.1361 7.4043 10.2955 7.4043C10.5311 7.4043 10.7227 7.4418 10.8703 7.5168C11.018 7.59063 11.1299 7.69316 11.2061 7.82441C11.2822 7.95449 11.3285 8.10508 11.3449 8.27617H10.7525C10.7408 8.1918 10.7186 8.12031 10.6857 8.06172C10.6541 8.00195 10.6084 7.95684 10.5486 7.92637C10.4889 7.89473 10.4115 7.87891 10.3166 7.87891C10.2428 7.87891 10.1754 7.89473 10.1145 7.92637C10.0547 7.95801 10.0037 8.00605 9.96152 8.07051C9.91934 8.13379 9.88652 8.21348 9.86309 8.30957C9.84082 8.40566 9.82969 8.51816 9.82969 8.64707V8.79297C9.82969 8.9207 9.84023 9.03262 9.86133 9.12871C9.88359 9.2248 9.91641 9.30508 9.95977 9.36953C10.0043 9.43281 10.0605 9.48086 10.1285 9.51367C10.1977 9.54531 10.2791 9.56113 10.3729 9.56113C10.4385 9.56113 10.4947 9.55586 10.5416 9.54531C10.5885 9.53359 10.6271 9.51953 10.6576 9.50312C10.6893 9.48555 10.7133 9.46914 10.7297 9.45391V9.05664H10.3008V8.63301H11.3467Z' fill='white'/%3e%3cpath id='Vector_4' d='M7.82891 9.13242H7.19258V8.65605H7.82891C7.91563 8.65605 7.98594 8.64141 8.03984 8.61211C8.09375 8.58281 8.13301 8.54238 8.15762 8.49082C8.1834 8.43809 8.19629 8.37891 8.19629 8.31328C8.19629 8.24297 8.1834 8.17793 8.15762 8.11816C8.13301 8.0584 8.09375 8.01035 8.03984 7.97402C7.98594 7.93652 7.91563 7.91777 7.82891 7.91777H7.42461V10.0008H6.80762V7.44141H7.82891C8.03398 7.44141 8.21035 7.47891 8.35801 7.55391C8.50684 7.62891 8.62109 7.73203 8.70078 7.86328C8.78047 7.99336 8.82031 8.14219 8.82031 8.30977C8.82031 8.475 8.78047 8.61914 8.70078 8.74219C8.62109 8.86523 8.50684 8.96133 8.35801 9.03047C8.21035 9.09844 8.03398 9.13242 7.82891 9.13242Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.70059 9.19746V7.44141H6.31582V9.19746C6.31582 9.36855 6.27656 9.5168 6.19805 9.64219C6.1207 9.76758 6.01523 9.86484 5.88164 9.93398C5.74922 10.002 5.60039 10.0359 5.43516 10.0359C5.26406 10.0359 5.11172 10.0072 4.97812 9.9498C4.8457 9.89238 4.74141 9.80391 4.66523 9.68437C4.59023 9.56484 4.55273 9.4125 4.55273 9.22734H5.17148C5.17148 9.31406 5.18145 9.38203 5.20137 9.43125C5.22129 9.4793 5.25059 9.51328 5.28926 9.5332C5.3291 9.55195 5.37773 9.56133 5.43516 9.56133C5.49141 9.56133 5.53887 9.54727 5.57754 9.51914C5.61738 9.48984 5.64785 9.44824 5.66895 9.39434C5.69004 9.33926 5.70059 9.27363 5.70059 9.19746Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$e = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23AE6BF1'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JSON'%3e%3cpath id='Vector_3' d='M12.6014 7.44043V9.9998H11.9861L11.0809 8.40723V9.9998H10.4639V7.44043H11.0809L11.9861 9.03301V7.44043H12.6014Z' fill='white'/%3e%3cpath id='Vector_4' d='M10.0434 8.66914V8.77285C10.0434 8.96855 10.0158 9.14434 9.96074 9.3002C9.90684 9.45488 9.83008 9.5873 9.73047 9.69746C9.63086 9.80645 9.51309 9.89023 9.37715 9.94883C9.24121 10.0063 9.09121 10.035 8.92715 10.035C8.76191 10.035 8.61074 10.0063 8.47363 9.94883C8.3377 9.89023 8.21934 9.80645 8.11855 9.69746C8.01895 9.5873 7.9416 9.45488 7.88652 9.3002C7.83262 9.14434 7.80566 8.96855 7.80566 8.77285V8.66914C7.80566 8.47344 7.83262 8.29766 7.88652 8.1418C7.9416 7.98594 8.01836 7.85352 8.1168 7.74453C8.21641 7.63437 8.33418 7.55059 8.47012 7.49316C8.60723 7.43457 8.7584 7.40527 8.92363 7.40527C9.0877 7.40527 9.2377 7.43457 9.37363 7.49316C9.51074 7.55059 9.6291 7.63437 9.72871 7.74453C9.82832 7.85352 9.90566 7.98594 9.96074 8.1418C10.0158 8.29766 10.0434 8.47344 10.0434 8.66914ZM9.41758 8.77285V8.66562C9.41758 8.53906 9.40645 8.42773 9.38418 8.33164C9.36309 8.23438 9.33145 8.15293 9.28926 8.0873C9.24707 8.02168 9.19492 7.97246 9.13281 7.93965C9.07187 7.90566 9.00215 7.88867 8.92363 7.88867C8.8416 7.88867 8.77012 7.90566 8.70918 7.93965C8.64824 7.97246 8.59727 8.02168 8.55625 8.0873C8.51523 8.15293 8.48418 8.23438 8.46309 8.33164C8.44316 8.42773 8.4332 8.53906 8.4332 8.66562V8.77285C8.4332 8.89824 8.44316 9.00957 8.46309 9.10684C8.48418 9.20293 8.51523 9.28437 8.55625 9.35117C8.59844 9.41797 8.65 9.46836 8.71094 9.50234C8.77305 9.53633 8.84512 9.55332 8.92715 9.55332C9.00566 9.55332 9.07539 9.53633 9.13633 9.50234C9.19727 9.46836 9.24824 9.41797 9.28926 9.35117C9.33145 9.28437 9.36309 9.20293 9.38418 9.10684C9.40645 9.00957 9.41758 8.89824 9.41758 8.77285Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.84336 9.31953C6.84336 9.27969 6.8375 9.24395 6.82578 9.2123C6.81406 9.17949 6.79238 9.14902 6.76074 9.1209C6.7291 9.09277 6.6834 9.06465 6.62363 9.03652C6.56504 9.00723 6.4877 8.97676 6.3916 8.94512C6.2791 8.90762 6.1707 8.86543 6.06641 8.81855C5.96211 8.77051 5.86895 8.71484 5.78691 8.65156C5.70488 8.58711 5.63984 8.51211 5.5918 8.42656C5.54375 8.33984 5.51973 8.23906 5.51973 8.12422C5.51973 8.01406 5.54434 7.91504 5.59355 7.82715C5.64277 7.73809 5.71133 7.6625 5.79922 7.60039C5.88828 7.53711 5.99258 7.48906 6.11211 7.45625C6.23164 7.42227 6.3623 7.40527 6.5041 7.40527C6.6916 7.40527 6.85684 7.43809 6.9998 7.50371C7.14395 7.56816 7.25645 7.66016 7.3373 7.77969C7.41934 7.89805 7.46035 8.03809 7.46035 8.1998H6.84688C6.84688 8.13535 6.8334 8.07852 6.80645 8.0293C6.78066 7.98008 6.74141 7.94141 6.68867 7.91328C6.63594 7.88516 6.56973 7.87109 6.49004 7.87109C6.4127 7.87109 6.34766 7.88281 6.29492 7.90625C6.24219 7.92969 6.20234 7.96133 6.17539 8.00117C6.14844 8.03984 6.13496 8.08262 6.13496 8.12949C6.13496 8.16816 6.14551 8.20332 6.1666 8.23496C6.18887 8.26543 6.21992 8.29414 6.25977 8.32109C6.30078 8.34805 6.35 8.37383 6.40742 8.39844C6.46602 8.42305 6.53164 8.44707 6.6043 8.47051C6.74023 8.51387 6.86094 8.5625 6.96641 8.61641C7.07305 8.66914 7.1627 8.72949 7.23535 8.79746C7.30918 8.86426 7.36484 8.94043 7.40234 9.02598C7.44102 9.11152 7.46035 9.2082 7.46035 9.31602C7.46035 9.43086 7.43809 9.53281 7.39355 9.62187C7.34902 9.71094 7.28516 9.78652 7.20195 9.84863C7.11875 9.90957 7.01914 9.95586 6.90312 9.9875C6.78711 10.0191 6.65762 10.035 6.51465 10.035C6.3834 10.035 6.25391 10.0186 6.12617 9.98574C5.99961 9.95176 5.88477 9.9002 5.78164 9.83105C5.67852 9.76074 5.5959 9.67109 5.53379 9.56211C5.47285 9.45195 5.44238 9.32129 5.44238 9.17012H6.06113C6.06113 9.24512 6.07109 9.3084 6.09102 9.35996C6.11094 9.41152 6.14023 9.45312 6.17891 9.48477C6.21758 9.51523 6.26504 9.5375 6.32129 9.55156C6.37754 9.56445 6.44199 9.5709 6.51465 9.5709C6.59316 9.5709 6.65645 9.55977 6.70449 9.5375C6.75254 9.51406 6.7877 9.48359 6.80996 9.44609C6.83223 9.40742 6.84336 9.36523 6.84336 9.31953Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.41738 9.19648V7.44043H5.03262V9.19648C5.03262 9.36758 4.99336 9.51582 4.91484 9.64121C4.8375 9.7666 4.73203 9.86387 4.59844 9.93301C4.46602 10.001 4.31719 10.035 4.15195 10.035C3.98086 10.035 3.82852 10.0063 3.69492 9.94883C3.5625 9.89141 3.4582 9.80293 3.38203 9.6834C3.30703 9.56387 3.26953 9.41152 3.26953 9.22637H3.88828C3.88828 9.31309 3.89824 9.38105 3.91816 9.43027C3.93809 9.47832 3.96738 9.5123 4.00605 9.53223C4.0459 9.55098 4.09453 9.56035 4.15195 9.56035C4.2082 9.56035 4.25566 9.54629 4.29434 9.51816C4.33418 9.48887 4.36465 9.44727 4.38574 9.39336C4.40684 9.33828 4.41738 9.27266 4.41738 9.19648Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$d = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%236155E9'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='KML'%3e%3cpath id='Vector_3' d='M11.7408 9.5252V9.9998H10.4471V9.5252H11.7408ZM10.6668 7.44043V9.9998H10.0498V7.44043H10.6668Z' fill='white'/%3e%3cpath id='Vector_4' d='M7.09785 7.44043H7.60059L8.17188 9.22109L8.74316 7.44043H9.2459L8.37578 9.9998H7.96797L7.09785 7.44043ZM6.79199 7.44043H7.3123L7.40898 9.40215V9.9998H6.79199V7.44043ZM9.03145 7.44043H9.55352V9.9998H8.93477V9.40215L9.03145 7.44043Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.00664 7.44043V9.9998H4.38965V7.44043H5.00664ZM6.53418 7.44043L5.54277 8.7377L4.9627 9.37227L4.8502 8.80625L5.22109 8.24375L5.77305 7.44043H6.53418ZM5.80469 9.9998L5.14375 8.84668L5.62363 8.49336L6.53418 9.9998H5.80469Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$c = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23EC473F'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PDF'%3e%3cpath id='Vector_3' d='M10.2654 7.44043V9.9998H9.64844V7.44043H10.2654ZM11.2604 8.50566V8.98027H10.0896V8.50566H11.2604ZM11.3605 7.44043V7.9168H10.0896V7.44043H11.3605Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.04922 9.9998H7.48145L7.48496 9.5252H8.04922C8.16641 9.5252 8.26543 9.49707 8.34629 9.44082C8.42832 9.38457 8.49043 9.30078 8.53262 9.18945C8.57598 9.07695 8.59766 8.93867 8.59766 8.77461V8.66387C8.59766 8.54082 8.58535 8.43301 8.56074 8.34043C8.5373 8.24668 8.50215 8.16875 8.45527 8.10664C8.4084 8.04336 8.3498 7.9959 8.27949 7.96426C8.21035 7.93262 8.13066 7.9168 8.04043 7.9168H7.4709V7.44043H8.04043C8.21387 7.44043 8.37266 7.47031 8.5168 7.53008C8.66211 7.58867 8.7875 7.67305 8.89297 7.7832C8.99961 7.89219 9.08164 8.02168 9.13906 8.17168C9.19766 8.32051 9.22695 8.48574 9.22695 8.66738V8.77461C9.22695 8.95508 9.19766 9.12031 9.13906 9.27031C9.08164 9.42031 9.0002 9.5498 8.89473 9.65879C8.78926 9.76777 8.66445 9.85215 8.52031 9.91191C8.37734 9.97051 8.22031 9.9998 8.04922 9.9998ZM7.83477 7.44043V9.9998H7.21777V7.44043H7.83477Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.79375 9.13145H5.15742V8.65508H5.79375C5.88047 8.65508 5.95078 8.64043 6.00469 8.61113C6.05859 8.58184 6.09785 8.54141 6.12246 8.48984C6.14824 8.43711 6.16113 8.37793 6.16113 8.3123C6.16113 8.24199 6.14824 8.17695 6.12246 8.11719C6.09785 8.05742 6.05859 8.00937 6.00469 7.97305C5.95078 7.93555 5.88047 7.9168 5.79375 7.9168H5.38945V9.9998H4.77246V7.44043H5.79375C5.99883 7.44043 6.1752 7.47793 6.32285 7.55293C6.47168 7.62793 6.58594 7.73105 6.66562 7.8623C6.74531 7.99238 6.78516 8.14121 6.78516 8.30879C6.78516 8.47402 6.74531 8.61816 6.66562 8.74121C6.58594 8.86426 6.47168 8.96035 6.32285 9.02949C6.1752 9.09746 5.99883 9.13145 5.79375 9.13145Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$b = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%239381FF'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PNG'%3e%3cpath id='Vector_3' d='M11.5977 8.63301V9.68418C11.5543 9.73223 11.4875 9.78379 11.3973 9.83887C11.3082 9.89277 11.1957 9.93906 11.0598 9.97773C10.9238 10.0164 10.7639 10.0357 10.5799 10.0357C10.41 10.0357 10.2559 10.0088 10.1176 9.95488C9.9793 9.8998 9.86035 9.81953 9.76074 9.71406C9.6623 9.60742 9.58613 9.47734 9.53223 9.32383C9.47949 9.16914 9.45312 8.99219 9.45312 8.79297V8.65059C9.45312 8.45137 9.48008 8.27441 9.53398 8.11973C9.58789 7.96504 9.66348 7.83496 9.76074 7.72949C9.85918 7.62285 9.97461 7.54199 10.107 7.48691C10.2406 7.43184 10.3871 7.4043 10.5465 7.4043C10.782 7.4043 10.9736 7.4418 11.1213 7.5168C11.2689 7.59063 11.3809 7.69316 11.457 7.82441C11.5332 7.95449 11.5795 8.10508 11.5959 8.27617H11.0035C10.9918 8.1918 10.9695 8.12031 10.9367 8.06172C10.9051 8.00195 10.8594 7.95684 10.7996 7.92637C10.7398 7.89473 10.6625 7.87891 10.5676 7.87891C10.4937 7.87891 10.4264 7.89473 10.3654 7.92637C10.3057 7.95801 10.2547 8.00605 10.2125 8.07051C10.1703 8.13379 10.1375 8.21348 10.1141 8.30957C10.0918 8.40566 10.0807 8.51816 10.0807 8.64707V8.79297C10.0807 8.9207 10.0912 9.03262 10.1123 9.12871C10.1346 9.2248 10.1674 9.30508 10.2107 9.36953C10.2553 9.43281 10.3115 9.48086 10.3795 9.51367C10.4486 9.54531 10.5301 9.56113 10.6238 9.56113C10.6895 9.56113 10.7457 9.55586 10.7926 9.54531C10.8395 9.53359 10.8781 9.51953 10.9086 9.50312C10.9402 9.48555 10.9643 9.46914 10.9807 9.45391V9.05664H10.5518V8.63301H11.5977Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.01445 7.44141V10.0008H8.39922L7.49395 8.4082V10.0008H6.87695V7.44141H7.49395L8.39922 9.03398V7.44141H9.01445Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.45293 9.13242H4.8166V8.65605H5.45293C5.53965 8.65605 5.60996 8.64141 5.66387 8.61211C5.71777 8.58281 5.75703 8.54238 5.78164 8.49082C5.80742 8.43809 5.82031 8.37891 5.82031 8.31328C5.82031 8.24297 5.80742 8.17793 5.78164 8.11816C5.75703 8.0584 5.71777 8.01035 5.66387 7.97402C5.60996 7.93652 5.53965 7.91777 5.45293 7.91777H5.04863V10.0008H4.43164V7.44141H5.45293C5.65801 7.44141 5.83437 7.47891 5.98203 7.55391C6.13086 7.62891 6.24512 7.73203 6.3248 7.86328C6.40449 7.99336 6.44434 8.14219 6.44434 8.30977C6.44434 8.475 6.40449 8.61914 6.3248 8.74219C6.24512 8.86523 6.13086 8.96133 5.98203 9.03047C5.83437 9.09844 5.65801 9.13242 5.45293 9.13242Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$a = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23CA4424'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PPTX'%3e%3cpath id='Vector_3' d='M11.2125 7.44043L11.6309 8.29121L12.0492 7.44043H12.7523L12.0387 8.70957L12.7717 9.9998H12.0615L11.6309 9.1332L11.2002 9.9998H10.4883L11.223 8.70957L10.5076 7.44043H11.2125Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.54414 7.44043V9.9998H8.92715V7.44043H9.54414ZM10.3141 7.44043V7.9168H8.1748V7.44043H10.3141Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.88164 9.13145H6.24531V8.65508H6.88164C6.96836 8.65508 7.03867 8.64043 7.09258 8.61113C7.14648 8.58184 7.18574 8.54141 7.21035 8.48984C7.23613 8.43711 7.24902 8.37793 7.24902 8.3123C7.24902 8.24199 7.23613 8.17695 7.21035 8.11719C7.18574 8.05742 7.14648 8.00937 7.09258 7.97305C7.03867 7.93555 6.96836 7.9168 6.88164 7.9168H6.47734V9.9998H5.86035V7.44043H6.88164C7.08672 7.44043 7.26309 7.47793 7.41074 7.55293C7.55957 7.62793 7.67383 7.73105 7.75352 7.8623C7.8332 7.99238 7.87305 8.14121 7.87305 8.30879C7.87305 8.47402 7.8332 8.61816 7.75352 8.74121C7.67383 8.86426 7.55957 8.96035 7.41074 9.02949C7.26309 9.09746 7.08672 9.13145 6.88164 9.13145Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.43633 9.13145H3.8V8.65508H4.43633C4.52305 8.65508 4.59336 8.64043 4.64727 8.61113C4.70117 8.58184 4.74043 8.54141 4.76504 8.48984C4.79082 8.43711 4.80371 8.37793 4.80371 8.3123C4.80371 8.24199 4.79082 8.17695 4.76504 8.11719C4.74043 8.05742 4.70117 8.00937 4.64727 7.97305C4.59336 7.93555 4.52305 7.9168 4.43633 7.9168H4.03203V9.9998H3.41504V7.44043H4.43633C4.64141 7.44043 4.81777 7.47793 4.96543 7.55293C5.11426 7.62793 5.22852 7.73105 5.3082 7.8623C5.38789 7.99238 5.42773 8.14121 5.42773 8.30879C5.42773 8.47402 5.38789 8.61816 5.3082 8.74121C5.22852 8.86426 5.11426 8.96035 4.96543 9.02949C4.81777 9.09746 4.64141 9.13145 4.43633 9.13145Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$9 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%233674A5'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PY'%3e%3cpath id='Vector_3' d='M8.75215 7.44141L9.22324 8.55234L9.69609 7.44141H10.3605L9.53789 9.08145V10.0008H8.91035V9.08145L8.08594 7.44141H8.75215Z' fill='%23FED341'/%3e%3cpath id='Vector_4' d='M6.86406 9.13242H6.22773V8.65605H6.86406C6.95078 8.65605 7.02109 8.64141 7.075 8.61211C7.12891 8.58281 7.16816 8.54238 7.19277 8.49082C7.21855 8.43809 7.23145 8.37891 7.23145 8.31328C7.23145 8.24297 7.21855 8.17793 7.19277 8.11816C7.16816 8.0584 7.12891 8.01035 7.075 7.97402C7.02109 7.93652 6.95078 7.91777 6.86406 7.91777H6.45977V10.0008H5.84277V7.44141H6.86406C7.06914 7.44141 7.24551 7.47891 7.39316 7.55391C7.54199 7.62891 7.65625 7.73203 7.73594 7.86328C7.81563 7.99336 7.85547 8.14219 7.85547 8.30977C7.85547 8.475 7.81563 8.61914 7.73594 8.74219C7.65625 8.86523 7.54199 8.96133 7.39316 9.03047C7.24551 9.09844 7.06914 9.13242 6.86406 9.13242Z' fill='%23FED341'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$8 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23C0D155'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='SHP'%3e%3cpath id='Vector_3' d='M10.5359 9.13145H9.89961V8.65508H10.5359C10.6227 8.65508 10.693 8.64043 10.7469 8.61113C10.8008 8.58184 10.84 8.54141 10.8646 8.48984C10.8904 8.43711 10.9033 8.37793 10.9033 8.3123C10.9033 8.24199 10.8904 8.17695 10.8646 8.11719C10.84 8.05742 10.8008 8.00937 10.7469 7.97305C10.693 7.93555 10.6227 7.9168 10.5359 7.9168H10.1316V9.9998H9.51465V7.44043H10.5359C10.741 7.44043 10.9174 7.47793 11.065 7.55293C11.2139 7.62793 11.3281 7.73105 11.4078 7.8623C11.4875 7.99238 11.5273 8.14121 11.5273 8.30879C11.5273 8.47402 11.4875 8.61816 11.4078 8.74121C11.3281 8.86426 11.2139 8.96035 11.065 9.02949C10.9174 9.09746 10.741 9.13145 10.5359 9.13145Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.6082 8.45645V8.93105H7.29512V8.45645H8.6082ZM7.50078 7.44043V9.9998H6.88379V7.44043H7.50078ZM9.02305 7.44043V9.9998H8.40781V7.44043H9.02305Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.84824 9.31953C5.84824 9.27969 5.84238 9.24395 5.83066 9.2123C5.81895 9.17949 5.79727 9.14902 5.76562 9.1209C5.73398 9.09277 5.68828 9.06465 5.62852 9.03652C5.56992 9.00723 5.49258 8.97676 5.39648 8.94512C5.28398 8.90762 5.17559 8.86543 5.07129 8.81855C4.96699 8.77051 4.87383 8.71484 4.7918 8.65156C4.70977 8.58711 4.64473 8.51211 4.59668 8.42656C4.54863 8.33984 4.52461 8.23906 4.52461 8.12422C4.52461 8.01406 4.54922 7.91504 4.59844 7.82715C4.64766 7.73809 4.71621 7.6625 4.8041 7.60039C4.89316 7.53711 4.99746 7.48906 5.11699 7.45625C5.23652 7.42227 5.36719 7.40527 5.50898 7.40527C5.69648 7.40527 5.86172 7.43809 6.00469 7.50371C6.14883 7.56816 6.26133 7.66016 6.34219 7.77969C6.42422 7.89805 6.46523 8.03809 6.46523 8.1998H5.85176C5.85176 8.13535 5.83828 8.07852 5.81133 8.0293C5.78555 7.98008 5.74629 7.94141 5.69355 7.91328C5.64082 7.88516 5.57461 7.87109 5.49492 7.87109C5.41758 7.87109 5.35254 7.88281 5.2998 7.90625C5.24707 7.92969 5.20723 7.96133 5.18027 8.00117C5.15332 8.03984 5.13984 8.08262 5.13984 8.12949C5.13984 8.16816 5.15039 8.20332 5.17148 8.23496C5.19375 8.26543 5.2248 8.29414 5.26465 8.32109C5.30566 8.34805 5.35488 8.37383 5.4123 8.39844C5.4709 8.42305 5.53652 8.44707 5.60918 8.47051C5.74512 8.51387 5.86582 8.5625 5.97129 8.61641C6.07793 8.66914 6.16758 8.72949 6.24023 8.79746C6.31406 8.86426 6.36973 8.94043 6.40723 9.02598C6.4459 9.11152 6.46523 9.2082 6.46523 9.31602C6.46523 9.43086 6.44297 9.53281 6.39844 9.62187C6.35391 9.71094 6.29004 9.78652 6.20684 9.84863C6.12363 9.90957 6.02402 9.95586 5.90801 9.9875C5.79199 10.0191 5.6625 10.035 5.51953 10.035C5.38828 10.035 5.25879 10.0186 5.13105 9.98574C5.00449 9.95176 4.88965 9.9002 4.78652 9.83105C4.6834 9.76074 4.60078 9.67109 4.53867 9.56211C4.47773 9.45195 4.44727 9.32129 4.44727 9.17012H5.06602C5.06602 9.24512 5.07598 9.3084 5.0959 9.35996C5.11582 9.41152 5.14512 9.45312 5.18379 9.48477C5.22246 9.51523 5.26992 9.5375 5.32617 9.55156C5.38242 9.56445 5.44687 9.5709 5.51953 9.5709C5.59805 9.5709 5.66133 9.55977 5.70937 9.5375C5.75742 9.51406 5.79258 9.48359 5.81484 9.44609C5.83711 9.40742 5.84824 9.36523 5.84824 9.31953Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$7 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23DDE3EA'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='TXT'%3e%3cpath id='Vector_3' d='M10.6838 7.44043V9.9998H10.0668V7.44043H10.6838ZM11.4537 7.44043V7.9168H9.31445V7.44043H11.4537Z' fill='black'/%3e%3cpath id='Vector_4' d='M7.58164 7.44043L8 8.29121L8.41836 7.44043H9.12148L8.40781 8.70957L9.14082 9.9998H8.43066L8 9.1332L7.56934 9.9998H6.85742L7.59219 8.70957L6.87676 7.44043H7.58164Z' fill='black'/%3e%3cpath id='Vector_5' d='M5.91328 7.44043V9.9998H5.29629V7.44043H5.91328ZM6.6832 7.44043V7.9168H4.54395V7.44043H6.6832Z' fill='black'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$6 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2341A246'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='XLSX'%3e%3cpath id='Vector_3' d='M10.983 7.44043L11.4014 8.29121L11.8197 7.44043H12.5229L11.8092 8.70957L12.5422 9.9998H11.832L11.4014 9.1332L10.9707 9.9998H10.2588L10.9936 8.70957L10.2781 7.44043H10.983Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.41172 9.31953C9.41172 9.27969 9.40586 9.24395 9.39414 9.2123C9.38242 9.17949 9.36074 9.14902 9.3291 9.1209C9.29746 9.09277 9.25176 9.06465 9.19199 9.03652C9.1334 9.00723 9.05605 8.97676 8.95996 8.94512C8.84746 8.90762 8.73906 8.86543 8.63477 8.81855C8.53047 8.77051 8.4373 8.71484 8.35527 8.65156C8.27324 8.58711 8.2082 8.51211 8.16016 8.42656C8.11211 8.33984 8.08809 8.23906 8.08809 8.12422C8.08809 8.01406 8.1127 7.91504 8.16191 7.82715C8.21113 7.73809 8.27969 7.6625 8.36758 7.60039C8.45664 7.53711 8.56094 7.48906 8.68047 7.45625C8.8 7.42227 8.93066 7.40527 9.07246 7.40527C9.25996 7.40527 9.4252 7.43809 9.56816 7.50371C9.7123 7.56816 9.8248 7.66016 9.90566 7.77969C9.9877 7.89805 10.0287 8.03809 10.0287 8.1998H9.41523C9.41523 8.13535 9.40176 8.07852 9.3748 8.0293C9.34902 7.98008 9.30977 7.94141 9.25703 7.91328C9.2043 7.88516 9.13809 7.87109 9.0584 7.87109C8.98105 7.87109 8.91602 7.88281 8.86328 7.90625C8.81055 7.92969 8.7707 7.96133 8.74375 8.00117C8.7168 8.03984 8.70332 8.08262 8.70332 8.12949C8.70332 8.16816 8.71387 8.20332 8.73496 8.23496C8.75723 8.26543 8.78828 8.29414 8.82812 8.32109C8.86914 8.34805 8.91836 8.37383 8.97578 8.39844C9.03437 8.42305 9.1 8.44707 9.17266 8.47051C9.30859 8.51387 9.4293 8.5625 9.53477 8.61641C9.64141 8.66914 9.73105 8.72949 9.80371 8.79746C9.87754 8.86426 9.9332 8.94043 9.9707 9.02598C10.0094 9.11152 10.0287 9.2082 10.0287 9.31602C10.0287 9.43086 10.0064 9.53281 9.96191 9.62187C9.91738 9.71094 9.85352 9.78652 9.77031 9.84863C9.68711 9.90957 9.5875 9.95586 9.47148 9.9875C9.35547 10.0191 9.22598 10.035 9.08301 10.035C8.95176 10.035 8.82227 10.0186 8.69453 9.98574C8.56797 9.95176 8.45312 9.9002 8.35 9.83105C8.24687 9.76074 8.16426 9.67109 8.10215 9.56211C8.04121 9.45195 8.01074 9.32129 8.01074 9.17012H8.62949C8.62949 9.24512 8.63945 9.3084 8.65937 9.35996C8.6793 9.41152 8.70859 9.45312 8.74727 9.48477C8.78594 9.51523 8.8334 9.5375 8.88965 9.55156C8.9459 9.56445 9.01035 9.5709 9.08301 9.5709C9.16152 9.5709 9.2248 9.55977 9.27285 9.5375C9.3209 9.51406 9.35605 9.48359 9.37832 9.44609C9.40059 9.40742 9.41172 9.36523 9.41172 9.31953Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.73301 9.5252V9.9998H6.43926V9.5252H7.73301ZM6.65898 7.44043V9.9998H6.04199V7.44043H6.65898Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.1793 7.44043L4.59766 8.29121L5.01602 7.44043H5.71914L5.00547 8.70957L5.73848 9.9998H5.02832L4.59766 9.1332L4.16699 9.9998H3.45508L4.18984 8.70957L3.47441 7.44043H4.1793Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+var img$5 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23F4BB0A'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='ZIP'%3e%3cpath id='Vector_3' d='M9.78789 9.13145H9.15156V8.65508H9.78789C9.87461 8.65508 9.94492 8.64043 9.99883 8.61113C10.0527 8.58184 10.092 8.54141 10.1166 8.48984C10.1424 8.43711 10.1553 8.37793 10.1553 8.3123C10.1553 8.24199 10.1424 8.17695 10.1166 8.11719C10.092 8.05742 10.0527 8.00937 9.99883 7.97305C9.94492 7.93555 9.87461 7.9168 9.78789 7.9168H9.38359V9.9998H8.7666V7.44043H9.78789C9.99297 7.44043 10.1693 7.47793 10.317 7.55293C10.4658 7.62793 10.5801 7.73105 10.6598 7.8623C10.7395 7.99238 10.7793 8.14121 10.7793 8.30879C10.7793 8.47402 10.7395 8.61816 10.6598 8.74121C10.5801 8.86426 10.4658 8.96035 10.317 9.02949C10.1693 9.09746 9.99297 9.13145 9.78789 9.13145Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.23242 7.44043V9.9998H7.61719V7.44043H8.23242Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.19551 9.5252V9.9998H5.34277V9.5252H7.19551ZM7.1832 7.75684L5.64863 9.9998H5.20215V9.67461L6.7543 7.44043H7.1832V7.75684ZM6.98457 7.44043V7.9168H5.19336V7.44043H6.98457Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+const getFileTypeIcon = (fileType) => {
+    switch (fileType) {
+        case FileType.CSV:
+            return img$i;
+        case FileType.XLSX:
+            return img$6;
+        case FileType.DOCX:
+            return img$h;
+        case FileType.PDF:
+            return img$c;
+        case FileType.JSON:
+            return img$e;
+        case FileType.KML:
+            return img$d;
+        case FileType.PPTX:
+            return img$a;
+        case FileType.SHP:
+            return img$8;
+        case FileType.TXT:
+            return img$7;
+        case FileType.ZIP:
+            return img$5;
+        case FileType.IMAGE:
+        case FileType.JPEG:
+            return img$g;
+        case FileType.JPG:
+            return img$f;
+        case FileType.PNG:
+            return img$b;
+        case FileType.PYTHON:
+            return img$9;
+        default:
+            return img$j;
+    }
+};
+
+const useAttachmentPreviewImages = ({ items, active, }) => {
+    const { api } = useGlobalContext();
+    const [blobUrls, setBlobUrls] = React.useState({});
+    const [failedLinks, setFailedLinks] = React.useState({});
+    const inFlightRef = React.useRef(new Set());
+    const blobUrlsRef = React.useRef(blobUrls);
+    blobUrlsRef.current = blobUrls;
+    React.useEffect(() => {
+        if (!active || !api?.catalog?.getFile)
+            return;
+        items.forEach(item => {
+            const fileType = getFileType(item.mimeType, item.name);
+            const isImage = IMAGE_FILE_TYPES.includes(fileType);
+            if (!isImage || item.isExternal)
+                return;
+            if (blobUrlsRef.current[item.link] || inFlightRef.current.has(item.link))
+                return;
+            inFlightRef.current.add(item.link);
+            api.catalog
+                .getFile(item.link)
+                .then(blob => {
+                const objectUrl = URL.createObjectURL(blob);
+                setBlobUrls(prev => ({ ...prev, [item.link]: objectUrl }));
+            })
+                .catch(() => {
+                setFailedLinks(prev => (prev[item.link] ? prev : { ...prev, [item.link]: true }));
+            })
+                .finally(() => {
+                inFlightRef.current.delete(item.link);
+            });
+        });
+    }, [active, api, items]);
+    React.useEffect(() => () => {
+        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
+    }, []);
+    return React.useMemo(() => items.map(item => {
+        const fileType = getFileType(item.mimeType, item.name);
+        const isImage = IMAGE_FILE_TYPES.includes(fileType);
+        const fileName = item.name;
+        if (!isImage)
+            return { src: getFileTypeIcon(fileType), fileName };
+        if (item.isExternal)
+            return { src: item.link, fileName };
+        const hasError = !!failedLinks[item.link];
+        const blobUrl = blobUrls[item.link];
+        return {
+            src: blobUrl ?? "",
+            fileName,
+            hasError,
+            isLoading: !hasError && !blobUrl,
+        };
+    }), [items, blobUrls, failedLinks]);
+};
+
+const useAutoCompleteControl = (items) => {
+    const [value, setValue] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const staticOptions = React.useMemo(() => (items ?? [])
+        .filter(Boolean)
+        .map(item => ({ text: String(item), value: String(item) })), [items]);
+    const onChange = React.useCallback((newValue) => setValue(newValue), []);
+    return {
+        value,
+        setValue,
+        onChange,
+        options: staticOptions.length ? staticOptions : options,
+        setOptions,
+    };
+};
+
+/**
+ * Пропсы хоста фонового слоя для корней, которые не берут пропсы из `useWrapperSize`
+ * (ставят `id`/`style` руками — `Title`, `Icon`, `Tabs`, `AddFeature`, `ExportPdf`, …).
+ *
+ * Контейнеры на `useContainerRoot` этот хук напрямую не зовут: `useWrapperSize` вызывает его
+ * сам и кладёт результат в `root` — так признаки хоста считаются в одном месте.
+ */
+const useBgImageHost = (elementConfig) => {
+    const hasBgImage = React.useMemo(() => hasContainerBgImage(elementConfig), [elementConfig]);
+    const innerPadding = !!elementConfig?.options?.innerPadding;
+    return React.useMemo(() => ({ $hasBgImage: hasBgImage, $innerPadding: innerPadding }), [hasBgImage, innerPadding]);
+};
+
+const useRenderContainerItem = (type, renderElement) => {
+    const { config, layerInfo, selectedTabId, attributes } = useWidgetContext(type);
+    return React.useCallback((elementConfig, attribute) => {
+        const { id, options, style, children } = elementConfig || {};
+        const { hideEmpty, innerTemplateStyle } = options || {};
+        const hasUnits = children?.some(item => item.id === "units");
+        const iconIndex = children?.findIndex(item => item.id === "icon");
+        const icon = children?.[iconIndex];
+        const hasIcon = !!icon;
+        const elementChildren = elementConfig?.children?.map(child => ({
+            type: "attributeValue",
+            ...child,
+            attributeName: attribute,
+            options: { noUnits: hasUnits, ...child.options },
+        }));
+        const attr = getAttributeConfigurationByName(getAttributesConfiguration(layerInfo).attributes, attribute);
+        if (hasIcon) {
+            elementChildren[iconIndex] = {
+                ...elementChildren[iconIndex],
+                ...getAttributeIconElement(attr?.icon),
+                attributeName: null,
+            };
+        }
+        const render = attribute
+            ? getRenderElement({
+                config,
+                elementConfig: {
+                    ...elementConfig,
+                    children: elementChildren,
+                },
+                selectedTabId,
+                attributes,
+                layerInfo,
+                type,
+            })
+            : renderElement;
+        const value = render({ id: "value" });
+        return {
+            id,
+            value,
+            hideEmpty,
+            style: innerTemplateStyle || style,
+            hasIcon,
+            hasUnits,
+            render,
+        };
+    }, [config, layerInfo, selectedTabId, attributes, type, renderElement]);
+};
+
+const customModes = MapboxDraw.modes;
+const StaticMode = {};
+const InvisibleMode = {};
+StaticMode.onSetup = function () {
+    this.setActionableState(undefined);
+    return {};
+};
+StaticMode.toDisplayFeatures = function (state, geojson, display) {
+    display(geojson);
+};
+InvisibleMode.onSetup = function () {
+    this.setActionableState(undefined);
+    return {};
+};
+InvisibleMode.toDisplayFeatures = function () { };
+customModes.static = StaticMode;
+customModes.invisible = InvisibleMode;
+
+const customStyles = [
+    {
+        id: "gl-draw-point",
+        type: "circle",
+        filter: ["all", ["==", "$type", "Point"]],
+        paint: {
+            "circle-radius": 5,
+            "circle-color": "#D20C0C",
+            "circle-stroke-color": "#FFFFFF",
+            "circle-stroke-width": 3,
+            "circle-stroke-opacity": 0.3,
+        },
+    },
+    {
+        id: "highlight-inactive-points",
+        type: "circle",
+        filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "false"]],
+        paint: {
+            "circle-radius": 5,
+            "circle-color": "#D20C0C",
+            "circle-stroke-color": "#FFFFFF",
+            "circle-stroke-width": 3,
+            "circle-stroke-opacity": 0.3,
+        },
+    },
+    {
+        id: "highlight-active-points",
+        type: "circle",
+        filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "true"]],
+        paint: {
+            "circle-radius": 3,
+            "circle-color": "#fbb03b",
+            "circle-stroke-color": "#FFFFFF",
+            "circle-stroke-width": 1,
+            "circle-stroke-opacity": 0.3,
+        },
+    },
+    {
+        id: "gl-draw-polygon-fill-static",
+        type: "fill",
+        filter: ["all", ["==", "$type", "Polygon"]],
+        paint: {
+            "fill-color": "#D20C0C",
+            "fill-outline-color": "#D20C0C",
+            "fill-opacity": 0.1,
+        },
+    },
+    {
+        id: "gl-draw-line",
+        type: "line",
+        filter: ["all", ["==", "$type", "LineString"]],
         layout: {
             "line-cap": "round",
             "line-join": "round",
@@ -6369,326 +6805,337 @@ const useLayerParams = (layer) => {
     return layerParams;
 };
 
-const parseAttachments = (raw) => {
-    if (!raw)
-        return [];
-    if (Array.isArray(raw))
-        return raw;
-    if (typeof raw !== "string")
-        return [];
-    try {
-        const parsed = JSON.parse(raw);
-        return Array.isArray(parsed) ? parsed : [];
-    }
-    catch {
-        return [];
-    }
-};
-const attachmentsFromFeatures = (features, mapping = {}) => {
-    if (!features?.length)
-        return [];
-    const { attributeLink = "link", attributeName = "name", attributeMime = "mimeType", attributeDate = "date", } = mapping;
-    return features
-        .map(feature => {
-        const link = feature.properties?.[attributeLink];
-        if (!link)
-            return null;
-        return {
-            link,
-            name: feature.properties?.[attributeName] ?? link,
-            mimeType: feature.properties?.[attributeMime] ?? "",
-            date: feature.properties?.[attributeDate],
-            isExternal: /^https?:\/\//.test(link),
-        };
-    })
-        .filter(Boolean);
-};
-
-const useAttachmentItems = ({ type, elementConfig, valueOverride, }) => {
-    const { attributes, dataSources } = useWidgetContext(type);
-    const { children, options } = elementConfig || {};
-    const { relatedDataSource, controls } = options || {};
-    const valueElement = React.useMemo(() => children?.find(({ id }) => id === "value"), [children]);
-    const attributeName = React.useMemo(() => {
-        const candidate = valueElement?.attributeName ?? elementConfig?.attributeName;
-        return Array.isArray(candidate) ? candidate[0] : candidate;
-    }, [valueElement, elementConfig]);
-    const rawValue = React.useMemo(() => {
-        if (valueOverride !== undefined)
-            return valueOverride;
-        if (!attributeName)
-            return undefined;
-        return attributes?.find(item => item.attributeName === attributeName)?.value;
-    }, [valueOverride, attributeName, attributes]);
-    const items = React.useMemo(() => {
-        if (relatedDataSource) {
-            const dataSource = dataSources?.find(({ name }) => name === relatedDataSource);
-            const mapping = controls?.[0];
-            return attachmentsFromFeatures(dataSource?.features, mapping);
+const useMaxZoomTo = () => {
+    const { currentPage } = useWidgetPage();
+    return React.useCallback((layerName) => {
+        if (!layerName) {
+            return [currentPage?.options?.maxZoomTo, undefined];
         }
-        return parseAttachments(rawValue);
-    }, [relatedDataSource, dataSources, controls, rawValue]);
-    return {
-        items,
-        attributeName,
-        rawValue,
-    };
-};
-
-const useGlobalContext = () => {
-    const { t, language, themeName, api, ewktGeometry, ewktExtent, zoomLevel, notification } = React.useContext(GlobalContext) || {};
-    const translate = React.useCallback((value, options) => {
-        if (t)
-            return t(value, options);
-        return options?.defaultValue ?? value;
-    }, [t]);
-    return React.useMemo(() => ({
-        t: translate,
-        language,
-        themeName,
-        api,
-        ewktGeometry,
-        ewktExtent,
-        zoomLevel,
-        notification,
-    }), [language, translate, api, ewktGeometry, ewktExtent, zoomLevel, themeName, notification]);
-};
-
-const GRID_TILE_SIZE = "4.5rem";
-const LIST_ICON_SIZE = "1.5rem";
-const JPG_MIME_TYPE = "image/jpeg";
-const PNG_MIME_TYPE = "image/png";
-const IMAGE_MIME_TYPES = [
-    "image/apng",
-    "image/avif",
-    "image/gif",
-    "image/jpeg",
-    "image/png",
-    "image/svg+xml",
-    "image/webp",
-];
-const XLSX_MIME_TYPES = [
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-];
-const PDF_MIME_TYPE = "application/pdf";
-const DOCX_MIME_TYPES = [
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-];
-const CSV_MIME_TYPE = "text/csv";
-const JSON_MIME_TYPE = "application/json";
-const TXT_MIME_TYPE = "text/plain";
-const PPTX_MIME_TYPES = [
-    "application/vnd.ms-powerpoint",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-];
-const SHP_MIME_TYPE = "application/octet-stream";
-const KML_MIME_TYPE = "application/octet-stream";
-const ZIP_MIME_TYPE = "application/zip";
-const PYTHON_MIME_TYPES = ["application/x-python-code", "text/x-python"];
-var AddAttachmentSource;
-(function (AddAttachmentSource) {
-    AddAttachmentSource["Pc"] = "pc";
-    AddAttachmentSource["Catalog"] = "catalog";
-    AddAttachmentSource["Link"] = "link";
-})(AddAttachmentSource || (AddAttachmentSource = {}));
-
-var FileType;
-(function (FileType) {
-    FileType[FileType["UNKNOWN"] = 0] = "UNKNOWN";
-    FileType[FileType["XLSX"] = 1] = "XLSX";
-    FileType[FileType["PDF"] = 2] = "PDF";
-    FileType[FileType["CSV"] = 3] = "CSV";
-    FileType[FileType["DOCX"] = 4] = "DOCX";
-    FileType[FileType["IMAGE"] = 5] = "IMAGE";
-    FileType[FileType["TXT"] = 6] = "TXT";
-    FileType[FileType["JSON"] = 7] = "JSON";
-    FileType[FileType["KML"] = 8] = "KML";
-    FileType[FileType["PPTX"] = 9] = "PPTX";
-    FileType[FileType["SHP"] = 10] = "SHP";
-    FileType[FileType["ZIP"] = 11] = "ZIP";
-    FileType[FileType["JPEG"] = 12] = "JPEG";
-    FileType[FileType["JPG"] = 13] = "JPG";
-    FileType[FileType["PNG"] = 14] = "PNG";
-    FileType[FileType["PYTHON"] = 15] = "PYTHON";
-})(FileType || (FileType = {}));
-const IMAGE_FILE_TYPES = [
-    FileType.IMAGE,
-    FileType.JPEG,
-    FileType.JPG,
-    FileType.PNG,
-];
-
-const getFileType = (mimeType = "", name = "") => {
-    if (mimeType === PNG_MIME_TYPE)
-        return FileType.PNG;
-    if (mimeType === JPG_MIME_TYPE)
-        return FileType.JPG;
-    if (IMAGE_MIME_TYPES.includes(mimeType))
-        return FileType.IMAGE;
-    if (XLSX_MIME_TYPES.includes(mimeType))
-        return FileType.XLSX;
-    if (DOCX_MIME_TYPES.includes(mimeType))
-        return FileType.DOCX;
-    if (mimeType === CSV_MIME_TYPE)
-        return FileType.CSV;
-    if (mimeType === PDF_MIME_TYPE)
-        return FileType.PDF;
-    if (mimeType === JSON_MIME_TYPE)
-        return FileType.JSON;
-    if (mimeType === KML_MIME_TYPE && (name.endsWith(".kml") || name.endsWith(".kmz"))) {
-        return FileType.KML;
-    }
-    if (PYTHON_MIME_TYPES.includes(mimeType))
-        return FileType.PYTHON;
-    if (mimeType === TXT_MIME_TYPE && name.endsWith(".py"))
-        return FileType.PYTHON;
-    if (mimeType === TXT_MIME_TYPE)
-        return FileType.TXT;
-    if (PPTX_MIME_TYPES.includes(mimeType))
-        return FileType.PPTX;
-    if (mimeType === SHP_MIME_TYPE && name.endsWith(".shp"))
-        return FileType.SHP;
-    if (mimeType === ZIP_MIME_TYPE)
-        return FileType.ZIP;
-    return name.endsWith(".py") ? FileType.PYTHON : FileType.UNKNOWN;
+        return [currentPage?.options?.maxZoomTo, currentPage?.layers?.find(item => item.name === layerName)?.maxZoomTo];
+    }, [currentPage?.layers, currentPage?.options?.maxZoomTo]);
 };
 
-var img$j = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2300AAFF'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cpath id='Vector_3' d='M9.84902 10.0353C9.69434 10.0353 9.55605 10.0112 9.43418 9.96318C9.3123 9.91396 9.20918 9.84658 9.1248 9.76104C9.0416 9.67549 8.97773 9.57705 8.9332 9.46572C8.88984 9.35439 8.86816 9.23662 8.86816 9.1124V9.04561C8.86816 8.90615 8.8875 8.77725 8.92617 8.65889C8.96484 8.53936 9.02227 8.43506 9.09844 8.346C9.17461 8.25693 9.27012 8.18779 9.38496 8.13857C9.4998 8.08818 9.6334 8.06299 9.78574 8.06299C9.92051 8.06299 10.0412 8.08467 10.1479 8.12803C10.2545 8.17139 10.3447 8.2335 10.4186 8.31436C10.4936 8.39521 10.5504 8.49307 10.5891 8.60791C10.6289 8.72275 10.6488 8.85166 10.6488 8.99463V9.23545H9.09492V8.86455H10.0705V8.81885C10.0717 8.75557 10.0605 8.70166 10.0371 8.65713C10.0148 8.6126 9.98203 8.57861 9.93867 8.55518C9.89531 8.53174 9.84258 8.52002 9.78047 8.52002C9.71602 8.52002 9.6627 8.53408 9.62051 8.56221C9.57949 8.59033 9.54727 8.629 9.52383 8.67822C9.50156 8.72627 9.48574 8.78193 9.47637 8.84521C9.46699 8.9085 9.46231 8.97529 9.46231 9.04561V9.1124C9.46231 9.18271 9.47168 9.24658 9.49043 9.304C9.51035 9.36143 9.53848 9.41064 9.5748 9.45166C9.6123 9.4915 9.65684 9.52256 9.7084 9.54482C9.76113 9.56709 9.8209 9.57822 9.8877 9.57822C9.96855 9.57822 10.0482 9.56299 10.1268 9.53252C10.2053 9.50205 10.2727 9.45166 10.3289 9.38135L10.5979 9.70127C10.5592 9.75635 10.5041 9.80967 10.4326 9.86123C10.3623 9.91279 10.2779 9.95498 10.1795 9.98779C10.0811 10.0194 9.9709 10.0353 9.84902 10.0353Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.4623 7.2998V9.9998H7.86816V7.2998H8.4623Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.17773 10.0001H5.58184V8.04893C5.58184 7.879 5.61699 7.73604 5.6873 7.62002C5.75879 7.50283 5.86133 7.41436 5.99492 7.35459C6.12852 7.29365 6.29023 7.26318 6.48008 7.26318C6.58789 7.26318 6.6916 7.27256 6.79121 7.29131C6.89082 7.31006 6.99395 7.33467 7.10059 7.36514L7.01797 7.83271C6.94883 7.81396 6.87617 7.79639 6.8 7.77998C6.725 7.76357 6.63066 7.75537 6.51699 7.75537C6.41035 7.75537 6.32715 7.78057 6.26738 7.83096C6.20762 7.88135 6.17773 7.954 6.17773 8.04893V10.0001ZM6.55039 8.09814V8.50947H5.30762V8.09814H6.55039ZM7.37129 8.09814V10.0001H6.77715V8.09814H7.37129Z' fill='white'/%3e%3c/g%3e%3c/svg%3e";
-
-var img$i = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2347C782'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='CSV'%3e%3cpath id='Vector_3' d='M10.3816 9.39736L10.9143 7.44092H11.6051L10.742 10.0003H10.2955L10.3816 9.39736ZM9.89824 7.44092L10.4309 9.39736L10.5205 10.0003H10.0687L9.21094 7.44092H9.89824Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.37852 9.32002C8.37852 9.28018 8.37266 9.24443 8.36094 9.21279C8.34922 9.17998 8.32754 9.14951 8.2959 9.12139C8.26426 9.09326 8.21855 9.06514 8.15879 9.03701C8.10019 9.00771 8.02285 8.97725 7.92676 8.94561C7.81426 8.90811 7.70586 8.86592 7.60156 8.81904C7.49727 8.771 7.4041 8.71533 7.32207 8.65205C7.24004 8.5876 7.175 8.5126 7.12695 8.42705C7.07891 8.34033 7.05488 8.23955 7.05488 8.12471C7.05488 8.01455 7.07949 7.91553 7.12871 7.82764C7.17793 7.73857 7.24648 7.66299 7.33437 7.60088C7.42344 7.5376 7.52773 7.48955 7.64727 7.45674C7.7668 7.42275 7.89746 7.40576 8.03926 7.40576C8.22676 7.40576 8.39199 7.43857 8.53496 7.5042C8.6791 7.56865 8.7916 7.66064 8.87246 7.78018C8.95449 7.89854 8.99551 8.03857 8.99551 8.20029H8.38203C8.38203 8.13584 8.36855 8.079 8.3416 8.02979C8.31582 7.98057 8.27656 7.94189 8.22383 7.91377C8.17109 7.88564 8.10488 7.87158 8.0252 7.87158C7.94785 7.87158 7.88281 7.8833 7.83008 7.90674C7.77734 7.93018 7.7375 7.96182 7.71055 8.00166C7.68359 8.04033 7.67012 8.08311 7.67012 8.12998C7.67012 8.16865 7.68066 8.20381 7.70176 8.23545C7.72402 8.26592 7.75508 8.29463 7.79492 8.32158C7.83594 8.34854 7.88516 8.37432 7.94258 8.39893C8.00117 8.42354 8.0668 8.44756 8.13945 8.471C8.27539 8.51436 8.39609 8.56299 8.50156 8.61689C8.6082 8.66963 8.69785 8.72998 8.77051 8.79795C8.84434 8.86475 8.9 8.94092 8.9375 9.02646C8.97617 9.11201 8.99551 9.20869 8.99551 9.3165C8.99551 9.43135 8.97324 9.5333 8.92871 9.62236C8.88418 9.71143 8.82031 9.78701 8.73711 9.84912C8.65391 9.91006 8.5543 9.95635 8.43828 9.98799C8.32227 10.0196 8.19277 10.0354 8.0498 10.0354C7.91855 10.0354 7.78906 10.019 7.66133 9.98623C7.53477 9.95225 7.41992 9.90068 7.3168 9.83154C7.21367 9.76123 7.13105 9.67158 7.06894 9.5626C7.00801 9.45244 6.97754 9.32178 6.97754 9.17061H7.59629C7.59629 9.24561 7.60625 9.30889 7.62617 9.36045C7.64609 9.41201 7.67539 9.45361 7.71406 9.48525C7.75273 9.51572 7.8002 9.53799 7.85645 9.55205C7.9127 9.56494 7.97715 9.57139 8.0498 9.57139C8.12832 9.57139 8.1916 9.56025 8.23965 9.53799C8.2877 9.51455 8.32285 9.48408 8.34512 9.44658C8.36738 9.40791 8.37852 9.36572 8.37852 9.32002Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.05293 9.1335H6.66816C6.65996 9.31162 6.61191 9.46865 6.52402 9.60459C6.43613 9.74053 6.31426 9.84658 6.1584 9.92275C6.00371 9.99775 5.8209 10.0353 5.60996 10.0353C5.43887 10.0353 5.28594 10.0065 5.15117 9.94912C5.01758 9.8917 4.90391 9.80908 4.81016 9.70127C4.71758 9.59346 4.64668 9.46279 4.59746 9.30928C4.54941 9.15576 4.52539 8.98291 4.52539 8.79072V8.65186C4.52539 8.45967 4.55059 8.28682 4.60098 8.1333C4.65254 7.97861 4.7252 7.84736 4.81895 7.73955C4.91387 7.63057 5.02754 7.54736 5.15996 7.48994C5.29238 7.43252 5.43945 7.40381 5.60117 7.40381C5.82383 7.40381 6.01191 7.44365 6.16543 7.52334C6.31895 7.60303 6.43789 7.7126 6.52227 7.85205C6.60664 7.99033 6.65645 8.14795 6.67168 8.3249H6.05645C6.0541 8.22881 6.0377 8.14854 6.00723 8.08408C5.97676 8.01846 5.92871 7.96924 5.86309 7.93643C5.79746 7.90361 5.71016 7.88721 5.60117 7.88721C5.525 7.88721 5.45879 7.90127 5.40254 7.92939C5.34629 7.95752 5.29941 8.00205 5.26191 8.06299C5.22441 8.12393 5.19629 8.20303 5.17754 8.30029C5.15996 8.39639 5.15117 8.5124 5.15117 8.64834V8.79072C5.15117 8.92666 5.15938 9.04268 5.17578 9.13877C5.19219 9.23486 5.21855 9.31338 5.25488 9.37432C5.29121 9.43525 5.33809 9.48037 5.39551 9.50967C5.4541 9.53779 5.52559 9.55186 5.60996 9.55186C5.70371 9.55186 5.78281 9.53721 5.84727 9.50791C5.91172 9.47744 5.96152 9.43174 5.99668 9.3708C6.03184 9.30869 6.05059 9.22959 6.05293 9.1335Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-
-var img$h = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%232B7CD3'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='DOCX'%3e%3cpath id='Vector_3' d='M11.3209 7.44092L11.7393 8.2917L12.1576 7.44092H12.8607L12.1471 8.71006L12.8801 10.0003H12.1699L11.7393 9.13369L11.3086 10.0003H10.5967L11.3314 8.71006L10.616 7.44092H11.3209Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.77754 9.1335H10.3928C10.3846 9.31162 10.3365 9.46865 10.2486 9.60459C10.1607 9.74053 10.0389 9.84658 9.88301 9.92275C9.72832 9.99775 9.54551 10.0353 9.33457 10.0353C9.16348 10.0353 9.01055 10.0065 8.87578 9.94912C8.74219 9.8917 8.62852 9.80908 8.53477 9.70127C8.44219 9.59346 8.37129 9.46279 8.32207 9.30928C8.27402 9.15576 8.25 8.98291 8.25 8.79072V8.65186C8.25 8.45967 8.2752 8.28682 8.32559 8.1333C8.37715 7.97861 8.4498 7.84736 8.54355 7.73955C8.63848 7.63057 8.75215 7.54736 8.88457 7.48994C9.01699 7.43252 9.16406 7.40381 9.32578 7.40381C9.54844 7.40381 9.73652 7.44365 9.89004 7.52334C10.0436 7.60303 10.1625 7.7126 10.2469 7.85205C10.3313 7.99033 10.3811 8.14795 10.3963 8.3249H9.78105C9.77871 8.22881 9.7623 8.14854 9.73184 8.08408C9.70137 8.01846 9.65332 7.96924 9.5877 7.93643C9.52207 7.90361 9.43477 7.88721 9.32578 7.88721C9.24961 7.88721 9.1834 7.90127 9.12715 7.92939C9.0709 7.95752 9.02402 8.00205 8.98652 8.06299C8.94902 8.12393 8.9209 8.20303 8.90215 8.30029C8.88457 8.39639 8.87578 8.5124 8.87578 8.64834V8.79072C8.87578 8.92666 8.88398 9.04268 8.90039 9.13877C8.9168 9.23486 8.94316 9.31338 8.97949 9.37432C9.01582 9.43525 9.0627 9.48037 9.12012 9.50967C9.17871 9.53779 9.2502 9.55186 9.33457 9.55186C9.42832 9.55186 9.50742 9.53721 9.57188 9.50791C9.63633 9.47744 9.68613 9.43174 9.72129 9.3708C9.75645 9.30869 9.7752 9.22959 9.77754 9.1335Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.90176 8.66963V8.77334C7.90176 8.96904 7.87422 9.14482 7.81914 9.30068C7.76523 9.45537 7.68848 9.58779 7.58887 9.69795C7.48926 9.80693 7.37148 9.89072 7.23555 9.94932C7.09961 10.0067 6.94961 10.0354 6.78555 10.0354C6.62031 10.0354 6.46914 10.0067 6.33203 9.94932C6.19609 9.89072 6.07773 9.80693 5.97695 9.69795C5.87734 9.58779 5.8 9.45537 5.74492 9.30068C5.69102 9.14482 5.66406 8.96904 5.66406 8.77334V8.66963C5.66406 8.47393 5.69102 8.29814 5.74492 8.14229C5.8 7.98643 5.87676 7.854 5.9752 7.74502C6.0748 7.63486 6.19258 7.55107 6.32852 7.49365C6.46563 7.43506 6.6168 7.40576 6.78203 7.40576C6.94609 7.40576 7.09609 7.43506 7.23203 7.49365C7.36914 7.55107 7.4875 7.63486 7.58711 7.74502C7.68672 7.854 7.76406 7.98643 7.81914 8.14229C7.87422 8.29814 7.90176 8.47393 7.90176 8.66963ZM7.27598 8.77334V8.66611C7.27598 8.53955 7.26484 8.42822 7.24258 8.33213C7.22148 8.23486 7.18984 8.15342 7.14766 8.08779C7.10547 8.02217 7.05332 7.97295 6.99121 7.94014C6.93027 7.90615 6.86055 7.88916 6.78203 7.88916C6.7 7.88916 6.62852 7.90615 6.56758 7.94014C6.50664 7.97295 6.45566 8.02217 6.41465 8.08779C6.37363 8.15342 6.34258 8.23486 6.32148 8.33213C6.30156 8.42822 6.2916 8.53955 6.2916 8.66611V8.77334C6.2916 8.89873 6.30156 9.01006 6.32148 9.10732C6.34258 9.20342 6.37363 9.28486 6.41465 9.35166C6.45684 9.41846 6.5084 9.46885 6.56934 9.50283C6.63145 9.53682 6.70352 9.55381 6.78555 9.55381C6.86406 9.55381 6.93379 9.53682 6.99473 9.50283C7.05566 9.46885 7.10664 9.41846 7.14766 9.35166C7.18984 9.28486 7.22148 9.20342 7.24258 9.10732C7.26484 9.01006 7.27598 8.89873 7.27598 8.77334Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.13711 10.0003H3.56934L3.57285 9.52568H4.13711C4.2543 9.52568 4.35332 9.49756 4.43418 9.44131C4.51621 9.38506 4.57832 9.30127 4.62051 9.18994C4.66387 9.07744 4.68555 8.93916 4.68555 8.7751V8.66436C4.68555 8.54131 4.67324 8.4335 4.64863 8.34092C4.6252 8.24717 4.59004 8.16924 4.54316 8.10713C4.49629 8.04385 4.4377 7.99639 4.36738 7.96475C4.29824 7.93311 4.21855 7.91729 4.12832 7.91729H3.55879V7.44092H4.12832C4.30176 7.44092 4.46055 7.4708 4.60469 7.53057C4.75 7.58916 4.87539 7.67354 4.98086 7.78369C5.0875 7.89268 5.16953 8.02217 5.22695 8.17217C5.28555 8.321 5.31484 8.48623 5.31484 8.66787V8.7751C5.31484 8.95557 5.28555 9.1208 5.22695 9.2708C5.16953 9.4208 5.08809 9.55029 4.98262 9.65928C4.87715 9.76826 4.75234 9.85264 4.6082 9.9124C4.46523 9.971 4.3082 10.0003 4.13711 10.0003ZM3.92266 7.44092V10.0003H3.30566V7.44092H3.92266Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-
-var img$g = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23FF9C54'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JPEG'%3e%3cpath id='Vector_3' d='M12.4043 8.63301V9.68418C12.3609 9.73223 12.2941 9.78379 12.2039 9.83887C12.1148 9.89277 12.0023 9.93906 11.8664 9.97773C11.7305 10.0164 11.5705 10.0357 11.3865 10.0357C11.2166 10.0357 11.0625 10.0088 10.9242 9.95488C10.7859 9.8998 10.667 9.81953 10.5674 9.71406C10.4689 9.60742 10.3928 9.47734 10.3389 9.32383C10.2861 9.16914 10.2598 8.99219 10.2598 8.79297V8.65059C10.2598 8.45137 10.2867 8.27441 10.3406 8.11973C10.3945 7.96504 10.4701 7.83496 10.5674 7.72949C10.6658 7.62285 10.7813 7.54199 10.9137 7.48691C11.0473 7.43184 11.1938 7.4043 11.3531 7.4043C11.5887 7.4043 11.7803 7.4418 11.9279 7.5168C12.0756 7.59063 12.1875 7.69316 12.2637 7.82441C12.3398 7.95449 12.3861 8.10508 12.4025 8.27617H11.8102C11.7984 8.1918 11.7762 8.12031 11.7434 8.06172C11.7117 8.00195 11.666 7.95684 11.6063 7.92637C11.5465 7.89473 11.4691 7.87891 11.3742 7.87891C11.3004 7.87891 11.233 7.89473 11.1721 7.92637C11.1123 7.95801 11.0613 8.00605 11.0191 8.07051C10.977 8.13379 10.9441 8.21348 10.9207 8.30957C10.8984 8.40566 10.8873 8.51816 10.8873 8.64707V8.79297C10.8873 8.9207 10.8979 9.03262 10.9189 9.12871C10.9412 9.2248 10.974 9.30508 11.0174 9.36953C11.0619 9.43281 11.1182 9.48086 11.1861 9.51367C11.2553 9.54531 11.3367 9.56113 11.4305 9.56113C11.4961 9.56113 11.5523 9.55586 11.5992 9.54531C11.6461 9.53359 11.6848 9.51953 11.7152 9.50312C11.7469 9.48555 11.7709 9.46914 11.7873 9.45391V9.05664H11.3584V8.63301H12.4043Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.95762 9.52617V10.0008H8.59355V9.52617H9.95762ZM8.81328 7.44141V10.0008H8.19629V7.44141H8.81328ZM9.78184 8.45742V8.91621H8.59355V8.45742H9.78184ZM9.96289 7.44141V7.91777H8.59355V7.44141H9.96289Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.77227 9.13242H6.13594V8.65605H6.77227C6.85898 8.65605 6.9293 8.64141 6.9832 8.61211C7.03711 8.58281 7.07637 8.54238 7.10098 8.49082C7.12676 8.43809 7.13965 8.37891 7.13965 8.31328C7.13965 8.24297 7.12676 8.17793 7.10098 8.11816C7.07637 8.0584 7.03711 8.01035 6.9832 7.97402C6.9293 7.93652 6.85898 7.91777 6.77227 7.91777H6.36797V10.0008H5.75098V7.44141H6.77227C6.97734 7.44141 7.15371 7.47891 7.30137 7.55391C7.4502 7.62891 7.56445 7.73203 7.64414 7.86328C7.72383 7.99336 7.76367 8.14219 7.76367 8.30977C7.76367 8.475 7.72383 8.61914 7.64414 8.74219C7.56445 8.86523 7.4502 8.96133 7.30137 9.03047C7.15371 9.09844 6.97734 9.13242 6.77227 9.13242Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.64395 9.19746V7.44141H5.25918V9.19746C5.25918 9.36855 5.21992 9.5168 5.14141 9.64219C5.06406 9.76758 4.95859 9.86484 4.825 9.93398C4.69258 10.002 4.54375 10.0359 4.37852 10.0359C4.20742 10.0359 4.05508 10.0072 3.92148 9.9498C3.78906 9.89238 3.68477 9.80391 3.60859 9.68437C3.53359 9.56484 3.49609 9.4125 3.49609 9.22734H4.11484C4.11484 9.31406 4.1248 9.38203 4.14473 9.43125C4.16465 9.4793 4.19395 9.51328 4.23262 9.5332C4.27246 9.55195 4.32109 9.56133 4.37852 9.56133C4.43477 9.56133 4.48223 9.54727 4.5209 9.51914C4.56074 9.48984 4.59121 9.44824 4.6123 9.39434C4.6334 9.33926 4.64395 9.27363 4.64395 9.19746Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useCustomFeatureSelect = () => {
+    const { currentPage } = useWidgetPage();
+    return React.useCallback((layerName) => {
+        if (!layerName) {
+            return [currentPage?.options?.customFeatureSelect, undefined];
+        }
+        return [
+            currentPage?.options?.customFeatureSelect,
+            currentPage?.layers?.find(item => item.name === layerName)?.customFeatureSelect,
+        ];
+    }, [currentPage?.layers, currentPage?.options?.customFeatureSelect]);
+};
 
-var img$f = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23FF9C54'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JPG'%3e%3cpath id='Vector_3' d='M11.3467 8.63301V9.68418C11.3033 9.73223 11.2365 9.78379 11.1463 9.83887C11.0572 9.89277 10.9447 9.93906 10.8088 9.97773C10.6729 10.0164 10.5129 10.0357 10.3289 10.0357C10.159 10.0357 10.0049 10.0088 9.8666 9.95488C9.72832 9.8998 9.60938 9.81953 9.50977 9.71406C9.41133 9.60742 9.33516 9.47734 9.28125 9.32383C9.22852 9.16914 9.20215 8.99219 9.20215 8.79297V8.65059C9.20215 8.45137 9.2291 8.27441 9.28301 8.11973C9.33691 7.96504 9.4125 7.83496 9.50977 7.72949C9.6082 7.62285 9.72363 7.54199 9.85605 7.48691C9.98965 7.43184 10.1361 7.4043 10.2955 7.4043C10.5311 7.4043 10.7227 7.4418 10.8703 7.5168C11.018 7.59063 11.1299 7.69316 11.2061 7.82441C11.2822 7.95449 11.3285 8.10508 11.3449 8.27617H10.7525C10.7408 8.1918 10.7186 8.12031 10.6857 8.06172C10.6541 8.00195 10.6084 7.95684 10.5486 7.92637C10.4889 7.89473 10.4115 7.87891 10.3166 7.87891C10.2428 7.87891 10.1754 7.89473 10.1145 7.92637C10.0547 7.95801 10.0037 8.00605 9.96152 8.07051C9.91934 8.13379 9.88652 8.21348 9.86309 8.30957C9.84082 8.40566 9.82969 8.51816 9.82969 8.64707V8.79297C9.82969 8.9207 9.84023 9.03262 9.86133 9.12871C9.88359 9.2248 9.91641 9.30508 9.95977 9.36953C10.0043 9.43281 10.0605 9.48086 10.1285 9.51367C10.1977 9.54531 10.2791 9.56113 10.3729 9.56113C10.4385 9.56113 10.4947 9.55586 10.5416 9.54531C10.5885 9.53359 10.6271 9.51953 10.6576 9.50312C10.6893 9.48555 10.7133 9.46914 10.7297 9.45391V9.05664H10.3008V8.63301H11.3467Z' fill='white'/%3e%3cpath id='Vector_4' d='M7.82891 9.13242H7.19258V8.65605H7.82891C7.91563 8.65605 7.98594 8.64141 8.03984 8.61211C8.09375 8.58281 8.13301 8.54238 8.15762 8.49082C8.1834 8.43809 8.19629 8.37891 8.19629 8.31328C8.19629 8.24297 8.1834 8.17793 8.15762 8.11816C8.13301 8.0584 8.09375 8.01035 8.03984 7.97402C7.98594 7.93652 7.91563 7.91777 7.82891 7.91777H7.42461V10.0008H6.80762V7.44141H7.82891C8.03398 7.44141 8.21035 7.47891 8.35801 7.55391C8.50684 7.62891 8.62109 7.73203 8.70078 7.86328C8.78047 7.99336 8.82031 8.14219 8.82031 8.30977C8.82031 8.475 8.78047 8.61914 8.70078 8.74219C8.62109 8.86523 8.50684 8.96133 8.35801 9.03047C8.21035 9.09844 8.03398 9.13242 7.82891 9.13242Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.70059 9.19746V7.44141H6.31582V9.19746C6.31582 9.36855 6.27656 9.5168 6.19805 9.64219C6.1207 9.76758 6.01523 9.86484 5.88164 9.93398C5.74922 10.002 5.60039 10.0359 5.43516 10.0359C5.26406 10.0359 5.11172 10.0072 4.97812 9.9498C4.8457 9.89238 4.74141 9.80391 4.66523 9.68437C4.59023 9.56484 4.55273 9.4125 4.55273 9.22734H5.17148C5.17148 9.31406 5.18145 9.38203 5.20137 9.43125C5.22129 9.4793 5.25059 9.51328 5.28926 9.5332C5.3291 9.55195 5.37773 9.56133 5.43516 9.56133C5.49141 9.56133 5.53887 9.54727 5.57754 9.51914C5.61738 9.48984 5.64785 9.44824 5.66895 9.39434C5.69004 9.33926 5.70059 9.27363 5.70059 9.19746Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useCurrentPageLayers = () => {
+    const { currentPage } = useWidgetPage();
+    return React.useMemo(() => currentPage?.layers || [], [currentPage?.layers]);
+};
 
-var img$e = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23AE6BF1'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='JSON'%3e%3cpath id='Vector_3' d='M12.6014 7.44043V9.9998H11.9861L11.0809 8.40723V9.9998H10.4639V7.44043H11.0809L11.9861 9.03301V7.44043H12.6014Z' fill='white'/%3e%3cpath id='Vector_4' d='M10.0434 8.66914V8.77285C10.0434 8.96855 10.0158 9.14434 9.96074 9.3002C9.90684 9.45488 9.83008 9.5873 9.73047 9.69746C9.63086 9.80645 9.51309 9.89023 9.37715 9.94883C9.24121 10.0063 9.09121 10.035 8.92715 10.035C8.76191 10.035 8.61074 10.0063 8.47363 9.94883C8.3377 9.89023 8.21934 9.80645 8.11855 9.69746C8.01895 9.5873 7.9416 9.45488 7.88652 9.3002C7.83262 9.14434 7.80566 8.96855 7.80566 8.77285V8.66914C7.80566 8.47344 7.83262 8.29766 7.88652 8.1418C7.9416 7.98594 8.01836 7.85352 8.1168 7.74453C8.21641 7.63437 8.33418 7.55059 8.47012 7.49316C8.60723 7.43457 8.7584 7.40527 8.92363 7.40527C9.0877 7.40527 9.2377 7.43457 9.37363 7.49316C9.51074 7.55059 9.6291 7.63437 9.72871 7.74453C9.82832 7.85352 9.90566 7.98594 9.96074 8.1418C10.0158 8.29766 10.0434 8.47344 10.0434 8.66914ZM9.41758 8.77285V8.66562C9.41758 8.53906 9.40645 8.42773 9.38418 8.33164C9.36309 8.23438 9.33145 8.15293 9.28926 8.0873C9.24707 8.02168 9.19492 7.97246 9.13281 7.93965C9.07187 7.90566 9.00215 7.88867 8.92363 7.88867C8.8416 7.88867 8.77012 7.90566 8.70918 7.93965C8.64824 7.97246 8.59727 8.02168 8.55625 8.0873C8.51523 8.15293 8.48418 8.23438 8.46309 8.33164C8.44316 8.42773 8.4332 8.53906 8.4332 8.66562V8.77285C8.4332 8.89824 8.44316 9.00957 8.46309 9.10684C8.48418 9.20293 8.51523 9.28437 8.55625 9.35117C8.59844 9.41797 8.65 9.46836 8.71094 9.50234C8.77305 9.53633 8.84512 9.55332 8.92715 9.55332C9.00566 9.55332 9.07539 9.53633 9.13633 9.50234C9.19727 9.46836 9.24824 9.41797 9.28926 9.35117C9.33145 9.28437 9.36309 9.20293 9.38418 9.10684C9.40645 9.00957 9.41758 8.89824 9.41758 8.77285Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.84336 9.31953C6.84336 9.27969 6.8375 9.24395 6.82578 9.2123C6.81406 9.17949 6.79238 9.14902 6.76074 9.1209C6.7291 9.09277 6.6834 9.06465 6.62363 9.03652C6.56504 9.00723 6.4877 8.97676 6.3916 8.94512C6.2791 8.90762 6.1707 8.86543 6.06641 8.81855C5.96211 8.77051 5.86895 8.71484 5.78691 8.65156C5.70488 8.58711 5.63984 8.51211 5.5918 8.42656C5.54375 8.33984 5.51973 8.23906 5.51973 8.12422C5.51973 8.01406 5.54434 7.91504 5.59355 7.82715C5.64277 7.73809 5.71133 7.6625 5.79922 7.60039C5.88828 7.53711 5.99258 7.48906 6.11211 7.45625C6.23164 7.42227 6.3623 7.40527 6.5041 7.40527C6.6916 7.40527 6.85684 7.43809 6.9998 7.50371C7.14395 7.56816 7.25645 7.66016 7.3373 7.77969C7.41934 7.89805 7.46035 8.03809 7.46035 8.1998H6.84688C6.84688 8.13535 6.8334 8.07852 6.80645 8.0293C6.78066 7.98008 6.74141 7.94141 6.68867 7.91328C6.63594 7.88516 6.56973 7.87109 6.49004 7.87109C6.4127 7.87109 6.34766 7.88281 6.29492 7.90625C6.24219 7.92969 6.20234 7.96133 6.17539 8.00117C6.14844 8.03984 6.13496 8.08262 6.13496 8.12949C6.13496 8.16816 6.14551 8.20332 6.1666 8.23496C6.18887 8.26543 6.21992 8.29414 6.25977 8.32109C6.30078 8.34805 6.35 8.37383 6.40742 8.39844C6.46602 8.42305 6.53164 8.44707 6.6043 8.47051C6.74023 8.51387 6.86094 8.5625 6.96641 8.61641C7.07305 8.66914 7.1627 8.72949 7.23535 8.79746C7.30918 8.86426 7.36484 8.94043 7.40234 9.02598C7.44102 9.11152 7.46035 9.2082 7.46035 9.31602C7.46035 9.43086 7.43809 9.53281 7.39355 9.62187C7.34902 9.71094 7.28516 9.78652 7.20195 9.84863C7.11875 9.90957 7.01914 9.95586 6.90312 9.9875C6.78711 10.0191 6.65762 10.035 6.51465 10.035C6.3834 10.035 6.25391 10.0186 6.12617 9.98574C5.99961 9.95176 5.88477 9.9002 5.78164 9.83105C5.67852 9.76074 5.5959 9.67109 5.53379 9.56211C5.47285 9.45195 5.44238 9.32129 5.44238 9.17012H6.06113C6.06113 9.24512 6.07109 9.3084 6.09102 9.35996C6.11094 9.41152 6.14023 9.45312 6.17891 9.48477C6.21758 9.51523 6.26504 9.5375 6.32129 9.55156C6.37754 9.56445 6.44199 9.5709 6.51465 9.5709C6.59316 9.5709 6.65645 9.55977 6.70449 9.5375C6.75254 9.51406 6.7877 9.48359 6.80996 9.44609C6.83223 9.40742 6.84336 9.36523 6.84336 9.31953Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.41738 9.19648V7.44043H5.03262V9.19648C5.03262 9.36758 4.99336 9.51582 4.91484 9.64121C4.8375 9.7666 4.73203 9.86387 4.59844 9.93301C4.46602 10.001 4.31719 10.035 4.15195 10.035C3.98086 10.035 3.82852 10.0063 3.69492 9.94883C3.5625 9.89141 3.4582 9.80293 3.38203 9.6834C3.30703 9.56387 3.26953 9.41152 3.26953 9.22637H3.88828C3.88828 9.31309 3.89824 9.38105 3.91816 9.43027C3.93809 9.47832 3.96738 9.5123 4.00605 9.53223C4.0459 9.55098 4.09453 9.56035 4.15195 9.56035C4.2082 9.56035 4.25566 9.54629 4.29434 9.51816C4.33418 9.48887 4.36465 9.44727 4.38574 9.39336C4.40684 9.33828 4.41738 9.27266 4.41738 9.19648Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useLayerHiddenAttributes = (layerName) => {
+    const { currentPage, updateConfigPage } = useWidgetPage();
+    const layerHiddenAttributes = React.useMemo(() => {
+        return currentPage?.layers?.find(item => item.name === layerName)?.hiddenAttributes ?? [];
+    }, [currentPage?.layers, layerName]);
+    const updateLayerHiddenAttributes = React.useCallback((updatedHiddenAttributes) => {
+        updateConfigPage({
+            ...currentPage,
+            layers: currentPage?.layers?.map(item => {
+                return item.name === layerName
+                    ? {
+                        ...item,
+                        hiddenAttributes: updatedHiddenAttributes,
+                    }
+                    : item;
+            }),
+        });
+    }, [currentPage, layerName, updateConfigPage]);
+    return [layerHiddenAttributes, updateLayerHiddenAttributes];
+};
 
-var img$d = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%236155E9'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='KML'%3e%3cpath id='Vector_3' d='M11.7408 9.5252V9.9998H10.4471V9.5252H11.7408ZM10.6668 7.44043V9.9998H10.0498V7.44043H10.6668Z' fill='white'/%3e%3cpath id='Vector_4' d='M7.09785 7.44043H7.60059L8.17188 9.22109L8.74316 7.44043H9.2459L8.37578 9.9998H7.96797L7.09785 7.44043ZM6.79199 7.44043H7.3123L7.40898 9.40215V9.9998H6.79199V7.44043ZM9.03145 7.44043H9.55352V9.9998H8.93477V9.40215L9.03145 7.44043Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.00664 7.44043V9.9998H4.38965V7.44043H5.00664ZM6.53418 7.44043L5.54277 8.7377L4.9627 9.37227L4.8502 8.80625L5.22109 8.24375L5.77305 7.44043H6.53418ZM5.80469 9.9998L5.14375 8.84668L5.62363 8.49336L6.53418 9.9998H5.80469Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useVisibleProjectItems = (applyMinMaxScale) => {
+    const { map } = useMapContext();
+    const projectItems = useCurrentPageLayers();
+    const zoomChange = React.useMemo(() => (applyMinMaxScale && map.current?.getZoom() !== undefined ? Math.round(map.current?.getZoom()) : undefined), [applyMinMaxScale, map.current?.getZoom()]);
+    return React.useMemo(() => {
+        if (map.current?.getZoom() === undefined) {
+            return [];
+        }
+        return (projectItems?.filter(item => item.isVisible &&
+            (!applyMinMaxScale ||
+                (Math.round(map.current.getZoom()) >= (item.minScale ?? 0) &&
+                    Math.round(map.current.getZoom()) <= (item.maxScale ?? 30)))) ?? []);
+    }, [projectItems, zoomChange, applyMinMaxScale]);
+};
 
-var img$c = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23EC473F'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PDF'%3e%3cpath id='Vector_3' d='M10.2654 7.44043V9.9998H9.64844V7.44043H10.2654ZM11.2604 8.50566V8.98027H10.0896V8.50566H11.2604ZM11.3605 7.44043V7.9168H10.0896V7.44043H11.3605Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.04922 9.9998H7.48145L7.48496 9.5252H8.04922C8.16641 9.5252 8.26543 9.49707 8.34629 9.44082C8.42832 9.38457 8.49043 9.30078 8.53262 9.18945C8.57598 9.07695 8.59766 8.93867 8.59766 8.77461V8.66387C8.59766 8.54082 8.58535 8.43301 8.56074 8.34043C8.5373 8.24668 8.50215 8.16875 8.45527 8.10664C8.4084 8.04336 8.3498 7.9959 8.27949 7.96426C8.21035 7.93262 8.13066 7.9168 8.04043 7.9168H7.4709V7.44043H8.04043C8.21387 7.44043 8.37266 7.47031 8.5168 7.53008C8.66211 7.58867 8.7875 7.67305 8.89297 7.7832C8.99961 7.89219 9.08164 8.02168 9.13906 8.17168C9.19766 8.32051 9.22695 8.48574 9.22695 8.66738V8.77461C9.22695 8.95508 9.19766 9.12031 9.13906 9.27031C9.08164 9.42031 9.0002 9.5498 8.89473 9.65879C8.78926 9.76777 8.66445 9.85215 8.52031 9.91191C8.37734 9.97051 8.22031 9.9998 8.04922 9.9998ZM7.83477 7.44043V9.9998H7.21777V7.44043H7.83477Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.79375 9.13145H5.15742V8.65508H5.79375C5.88047 8.65508 5.95078 8.64043 6.00469 8.61113C6.05859 8.58184 6.09785 8.54141 6.12246 8.48984C6.14824 8.43711 6.16113 8.37793 6.16113 8.3123C6.16113 8.24199 6.14824 8.17695 6.12246 8.11719C6.09785 8.05742 6.05859 8.00937 6.00469 7.97305C5.95078 7.93555 5.88047 7.9168 5.79375 7.9168H5.38945V9.9998H4.77246V7.44043H5.79375C5.99883 7.44043 6.1752 7.47793 6.32285 7.55293C6.47168 7.62793 6.58594 7.73105 6.66562 7.8623C6.74531 7.99238 6.78516 8.14121 6.78516 8.30879C6.78516 8.47402 6.74531 8.61816 6.66562 8.74121C6.58594 8.86426 6.47168 8.96035 6.32285 9.02949C6.1752 9.09746 5.99883 9.13145 5.79375 9.13145Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useServerNotificationsContext = () => {
+    return React.useContext(ServerNotificationsContext);
+};
 
-var img$b = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%239381FF'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PNG'%3e%3cpath id='Vector_3' d='M11.5977 8.63301V9.68418C11.5543 9.73223 11.4875 9.78379 11.3973 9.83887C11.3082 9.89277 11.1957 9.93906 11.0598 9.97773C10.9238 10.0164 10.7639 10.0357 10.5799 10.0357C10.41 10.0357 10.2559 10.0088 10.1176 9.95488C9.9793 9.8998 9.86035 9.81953 9.76074 9.71406C9.6623 9.60742 9.58613 9.47734 9.53223 9.32383C9.47949 9.16914 9.45312 8.99219 9.45312 8.79297V8.65059C9.45312 8.45137 9.48008 8.27441 9.53398 8.11973C9.58789 7.96504 9.66348 7.83496 9.76074 7.72949C9.85918 7.62285 9.97461 7.54199 10.107 7.48691C10.2406 7.43184 10.3871 7.4043 10.5465 7.4043C10.782 7.4043 10.9736 7.4418 11.1213 7.5168C11.2689 7.59063 11.3809 7.69316 11.457 7.82441C11.5332 7.95449 11.5795 8.10508 11.5959 8.27617H11.0035C10.9918 8.1918 10.9695 8.12031 10.9367 8.06172C10.9051 8.00195 10.8594 7.95684 10.7996 7.92637C10.7398 7.89473 10.6625 7.87891 10.5676 7.87891C10.4937 7.87891 10.4264 7.89473 10.3654 7.92637C10.3057 7.95801 10.2547 8.00605 10.2125 8.07051C10.1703 8.13379 10.1375 8.21348 10.1141 8.30957C10.0918 8.40566 10.0807 8.51816 10.0807 8.64707V8.79297C10.0807 8.9207 10.0912 9.03262 10.1123 9.12871C10.1346 9.2248 10.1674 9.30508 10.2107 9.36953C10.2553 9.43281 10.3115 9.48086 10.3795 9.51367C10.4486 9.54531 10.5301 9.56113 10.6238 9.56113C10.6895 9.56113 10.7457 9.55586 10.7926 9.54531C10.8395 9.53359 10.8781 9.51953 10.9086 9.50312C10.9402 9.48555 10.9643 9.46914 10.9807 9.45391V9.05664H10.5518V8.63301H11.5977Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.01445 7.44141V10.0008H8.39922L7.49395 8.4082V10.0008H6.87695V7.44141H7.49395L8.39922 9.03398V7.44141H9.01445Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.45293 9.13242H4.8166V8.65605H5.45293C5.53965 8.65605 5.60996 8.64141 5.66387 8.61211C5.71777 8.58281 5.75703 8.54238 5.78164 8.49082C5.80742 8.43809 5.82031 8.37891 5.82031 8.31328C5.82031 8.24297 5.80742 8.17793 5.78164 8.11816C5.75703 8.0584 5.71777 8.01035 5.66387 7.97402C5.60996 7.93652 5.53965 7.91777 5.45293 7.91777H5.04863V10.0008H4.43164V7.44141H5.45293C5.65801 7.44141 5.83437 7.47891 5.98203 7.55391C6.13086 7.62891 6.24512 7.73203 6.3248 7.86328C6.40449 7.99336 6.44434 8.14219 6.44434 8.30977C6.44434 8.475 6.40449 8.61914 6.3248 8.74219C6.24512 8.86523 6.13086 8.96133 5.98203 9.03047C5.83437 9.09844 5.65801 9.13242 5.45293 9.13242Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const SERVER_NOTIFICATION_EVENT = {
+    ReceiveFeaturesUpdate: "ReceiveFeaturesUpdateNotification",
+    PythonProgressNotification: "ReceivePythonProgressNotification",
+    PythonSandboxStats: "ReceivePythonSandboxStatsNotification",
+};
+const POLL_SUBTASK_INTERVAL_MS = 500;
+const POLL_SUBTASK_TIMEOUT_MS = 15_000;
 
-var img$a = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23CA4424'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PPTX'%3e%3cpath id='Vector_3' d='M11.2125 7.44043L11.6309 8.29121L12.0492 7.44043H12.7523L12.0387 8.70957L12.7717 9.9998H12.0615L11.6309 9.1332L11.2002 9.9998H10.4883L11.223 8.70957L10.5076 7.44043H11.2125Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.54414 7.44043V9.9998H8.92715V7.44043H9.54414ZM10.3141 7.44043V7.9168H8.1748V7.44043H10.3141Z' fill='white'/%3e%3cpath id='Vector_5' d='M6.88164 9.13145H6.24531V8.65508H6.88164C6.96836 8.65508 7.03867 8.64043 7.09258 8.61113C7.14648 8.58184 7.18574 8.54141 7.21035 8.48984C7.23613 8.43711 7.24902 8.37793 7.24902 8.3123C7.24902 8.24199 7.23613 8.17695 7.21035 8.11719C7.18574 8.05742 7.14648 8.00937 7.09258 7.97305C7.03867 7.93555 6.96836 7.9168 6.88164 7.9168H6.47734V9.9998H5.86035V7.44043H6.88164C7.08672 7.44043 7.26309 7.47793 7.41074 7.55293C7.55957 7.62793 7.67383 7.73105 7.75352 7.8623C7.8332 7.99238 7.87305 8.14121 7.87305 8.30879C7.87305 8.47402 7.8332 8.61816 7.75352 8.74121C7.67383 8.86426 7.55957 8.96035 7.41074 9.02949C7.26309 9.09746 7.08672 9.13145 6.88164 9.13145Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.43633 9.13145H3.8V8.65508H4.43633C4.52305 8.65508 4.59336 8.64043 4.64727 8.61113C4.70117 8.58184 4.74043 8.54141 4.76504 8.48984C4.79082 8.43711 4.80371 8.37793 4.80371 8.3123C4.80371 8.24199 4.79082 8.17695 4.76504 8.11719C4.74043 8.05742 4.70117 8.00937 4.64727 7.97305C4.59336 7.93555 4.52305 7.9168 4.43633 7.9168H4.03203V9.9998H3.41504V7.44043H4.43633C4.64141 7.44043 4.81777 7.47793 4.96543 7.55293C5.11426 7.62793 5.22852 7.73105 5.3082 7.8623C5.38789 7.99238 5.42773 8.14121 5.42773 8.30879C5.42773 8.47402 5.38789 8.61816 5.3082 8.74121C5.22852 8.86426 5.11426 8.96035 4.96543 9.02949C4.81777 9.09746 4.64141 9.13145 4.43633 9.13145Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const usePythonSandbox = () => {
+    const { api } = useGlobalContext();
+    const preparePythonSandbox = React.useCallback(({ resourceId, isNotebook = false }) => api.remoteTaskManager.post({
+        workerType: "pythonService",
+        methodType: "pythonrunner/prepare",
+        data: { resourceId, isNotebook },
+    }), [api.remoteTaskManager]);
+    return { preparePythonSandbox };
+};
 
-var img$9 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%233674A5'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='PY'%3e%3cpath id='Vector_3' d='M8.75215 7.44141L9.22324 8.55234L9.69609 7.44141H10.3605L9.53789 9.08145V10.0008H8.91035V9.08145L8.08594 7.44141H8.75215Z' fill='%23FED341'/%3e%3cpath id='Vector_4' d='M6.86406 9.13242H6.22773V8.65605H6.86406C6.95078 8.65605 7.02109 8.64141 7.075 8.61211C7.12891 8.58281 7.16816 8.54238 7.19277 8.49082C7.21855 8.43809 7.23145 8.37891 7.23145 8.31328C7.23145 8.24297 7.21855 8.17793 7.19277 8.11816C7.16816 8.0584 7.12891 8.01035 7.075 7.97402C7.02109 7.93652 6.95078 7.91777 6.86406 7.91777H6.45977V10.0008H5.84277V7.44141H6.86406C7.06914 7.44141 7.24551 7.47891 7.39316 7.55391C7.54199 7.62891 7.65625 7.73203 7.73594 7.86328C7.81563 7.99336 7.85547 8.14219 7.85547 8.30977C7.85547 8.475 7.81563 8.61914 7.73594 8.74219C7.65625 8.86523 7.54199 8.96133 7.39316 9.03047C7.24551 9.09844 7.06914 9.13242 6.86406 9.13242Z' fill='%23FED341'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const FINAL_STATUSES = [
+    api.RemoteTaskStatus.Completed,
+    api.RemoteTaskStatus.Error,
+    api.RemoteTaskStatus.Interrupted,
+    api.RemoteTaskStatus.Timeout,
+];
+const wait = (ms) => new Promise(resolve => window.setTimeout(resolve, ms));
+const pollSubtaskCompletion = async ({ taskId, api, intervalMs = POLL_SUBTASK_INTERVAL_MS, timeoutMs = POLL_SUBTASK_TIMEOUT_MS, }) => {
+    const deadline = Date.now() + timeoutMs;
+    let subTask = (await api.remoteTaskManager.get(taskId))?.[0] ?? null;
+    while (subTask && !FINAL_STATUSES.includes(subTask.status)) {
+        if (Date.now() >= deadline)
+            return null;
+        await wait(intervalMs);
+        subTask = (await api.remoteTaskManager.get(taskId))?.[0] ?? null;
+    }
+    return subTask;
+};
 
-var img$8 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23C0D155'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='SHP'%3e%3cpath id='Vector_3' d='M10.5359 9.13145H9.89961V8.65508H10.5359C10.6227 8.65508 10.693 8.64043 10.7469 8.61113C10.8008 8.58184 10.84 8.54141 10.8646 8.48984C10.8904 8.43711 10.9033 8.37793 10.9033 8.3123C10.9033 8.24199 10.8904 8.17695 10.8646 8.11719C10.84 8.05742 10.8008 8.00937 10.7469 7.97305C10.693 7.93555 10.6227 7.9168 10.5359 7.9168H10.1316V9.9998H9.51465V7.44043H10.5359C10.741 7.44043 10.9174 7.47793 11.065 7.55293C11.2139 7.62793 11.3281 7.73105 11.4078 7.8623C11.4875 7.99238 11.5273 8.14121 11.5273 8.30879C11.5273 8.47402 11.4875 8.61816 11.4078 8.74121C11.3281 8.86426 11.2139 8.96035 11.065 9.02949C10.9174 9.09746 10.741 9.13145 10.5359 9.13145Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.6082 8.45645V8.93105H7.29512V8.45645H8.6082ZM7.50078 7.44043V9.9998H6.88379V7.44043H7.50078ZM9.02305 7.44043V9.9998H8.40781V7.44043H9.02305Z' fill='white'/%3e%3cpath id='Vector_5' d='M5.84824 9.31953C5.84824 9.27969 5.84238 9.24395 5.83066 9.2123C5.81895 9.17949 5.79727 9.14902 5.76562 9.1209C5.73398 9.09277 5.68828 9.06465 5.62852 9.03652C5.56992 9.00723 5.49258 8.97676 5.39648 8.94512C5.28398 8.90762 5.17559 8.86543 5.07129 8.81855C4.96699 8.77051 4.87383 8.71484 4.7918 8.65156C4.70977 8.58711 4.64473 8.51211 4.59668 8.42656C4.54863 8.33984 4.52461 8.23906 4.52461 8.12422C4.52461 8.01406 4.54922 7.91504 4.59844 7.82715C4.64766 7.73809 4.71621 7.6625 4.8041 7.60039C4.89316 7.53711 4.99746 7.48906 5.11699 7.45625C5.23652 7.42227 5.36719 7.40527 5.50898 7.40527C5.69648 7.40527 5.86172 7.43809 6.00469 7.50371C6.14883 7.56816 6.26133 7.66016 6.34219 7.77969C6.42422 7.89805 6.46523 8.03809 6.46523 8.1998H5.85176C5.85176 8.13535 5.83828 8.07852 5.81133 8.0293C5.78555 7.98008 5.74629 7.94141 5.69355 7.91328C5.64082 7.88516 5.57461 7.87109 5.49492 7.87109C5.41758 7.87109 5.35254 7.88281 5.2998 7.90625C5.24707 7.92969 5.20723 7.96133 5.18027 8.00117C5.15332 8.03984 5.13984 8.08262 5.13984 8.12949C5.13984 8.16816 5.15039 8.20332 5.17148 8.23496C5.19375 8.26543 5.2248 8.29414 5.26465 8.32109C5.30566 8.34805 5.35488 8.37383 5.4123 8.39844C5.4709 8.42305 5.53652 8.44707 5.60918 8.47051C5.74512 8.51387 5.86582 8.5625 5.97129 8.61641C6.07793 8.66914 6.16758 8.72949 6.24023 8.79746C6.31406 8.86426 6.36973 8.94043 6.40723 9.02598C6.4459 9.11152 6.46523 9.2082 6.46523 9.31602C6.46523 9.43086 6.44297 9.53281 6.39844 9.62187C6.35391 9.71094 6.29004 9.78652 6.20684 9.84863C6.12363 9.90957 6.02402 9.95586 5.90801 9.9875C5.79199 10.0191 5.6625 10.035 5.51953 10.035C5.38828 10.035 5.25879 10.0186 5.13105 9.98574C5.00449 9.95176 4.88965 9.9002 4.78652 9.83105C4.6834 9.76074 4.60078 9.67109 4.53867 9.56211C4.47773 9.45195 4.44727 9.32129 4.44727 9.17012H5.06602C5.06602 9.24512 5.07598 9.3084 5.0959 9.35996C5.11582 9.41152 5.14512 9.45312 5.18379 9.48477C5.22246 9.51523 5.26992 9.5375 5.32617 9.55156C5.38242 9.56445 5.44687 9.5709 5.51953 9.5709C5.59805 9.5709 5.66133 9.55977 5.70937 9.5375C5.75742 9.51406 5.79258 9.48359 5.81484 9.44609C5.83711 9.40742 5.84824 9.36523 5.84824 9.31953Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const usePythonTask = () => {
+    const { api: api$1, t } = useGlobalContext();
+    const { addSubscription, connection, unsubscribeById } = useServerNotificationsContext();
+    const { preparePythonSandbox } = usePythonSandbox();
+    const [status, setStatus] = React.useState(api.RemoteTaskStatus.Unknown);
+    const [log, setLog] = React.useState(null);
+    const [lastMessage, setLastMessage] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [executionTime, setExecutionTime] = React.useState(null);
+    const [taskId, setTaskId] = React.useState(null);
+    const [subscriptionId, setSubscriptionId] = React.useState(null);
+    const [isLogDialogOpen, setIsLogDialogOpen] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const reset = React.useCallback(() => {
+        setStatus(api.RemoteTaskStatus.Unknown);
+        setError(null);
+        setLoading(false);
+        setExecutionTime(null);
+        setTaskId(null);
+        setSubscriptionId(null);
+        setResult(null);
+    }, []);
+    const runTask = React.useCallback(async ({ resourceId, parameters, script, fileName, methodName, }) => {
+        reset();
+        setStatus(api.RemoteTaskStatus.Process);
+        setLog(null);
+        setLastMessage(null);
+        setLoading(true);
+        const start = Date.now();
+        let prototypeId = await api$1.remoteTaskManager.createTaskPrototype({
+            enabled: true,
+            startIfPreviousError: true,
+            startIfPreviousNotFinished: true,
+            subTaskSettings: [
+                {
+                    type: "pythonService",
+                    startParameters: {
+                        resourceId,
+                        parameters,
+                        script,
+                        fileName,
+                        methodName,
+                        method: "pythonrunner/run",
+                    },
+                },
+            ],
+        });
+        prototypeId = prototypeId.replace(/["']+/g, "");
+        await preparePythonSandbox({ resourceId });
+        const { id: newTaskId, success } = await api$1.remoteTaskManager.startTask1(prototypeId);
+        if (!success) {
+            setStatus(api.RemoteTaskStatus.Error);
+            setLog(t("taskRunFail", { ns: "devMode", defaultValue: "Не удалось запустить задачу" }));
+            setExecutionTime(Date.now() - start);
+            setLoading(false);
+        }
+        const newSubscriptionId = await addSubscription({
+            tag: "python_task_progress_event",
+            resourceId,
+        });
+        setTaskId(newTaskId);
+        setSubscriptionId(newSubscriptionId);
+        const onNotification = async ({ data }) => {
+            if (data?.taskId === newTaskId) {
+                const isFinished = [api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status);
+                setStatus(data.status);
+                setLog(prev => [prev, data.log].filter(Boolean).join(""));
+                if (data.log)
+                    setLastMessage(data.log);
+                setExecutionTime(Date.now() - start);
+                setLoading(false);
+                setTaskId(isFinished ? null : newTaskId);
+                setSubscriptionId(isFinished ? null : newSubscriptionId);
+                if (isFinished) {
+                    unsubscribeById(newSubscriptionId);
+                    connection.off(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
+                }
+                if (data.status === api.RemoteTaskStatus.Completed) {
+                    try {
+                        const subTask = await pollSubtaskCompletion({ taskId: newTaskId, api: api$1 });
+                        if (subTask?.status === api.RemoteTaskStatus.Completed) {
+                            const response = subTask.results?.response;
+                            setResult(typeof response === "object" && response !== null
+                                ? response
+                                : null);
+                        }
+                        else {
+                            setError(new Error(t("taskResultUnavailable", {
+                                ns: "devMode",
+                                defaultValue: "Не удалось получить результат задачи",
+                            })));
+                        }
+                    }
+                    catch (e) {
+                        setError(e instanceof Error ? e : new Error(String(e)));
+                    }
+                }
+            }
+        };
+        connection.on(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
+    }, [reset, api$1, preparePythonSandbox, addSubscription, connection, t, unsubscribeById]);
+    const stopTask = React.useCallback(async () => {
+        await api$1.remoteTaskManager.stop(taskId);
+        reset();
+        unsubscribeById(subscriptionId);
+    }, [api$1, reset, unsubscribeById, taskId, subscriptionId]);
+    const openLog = React.useCallback(() => {
+        setIsLogDialogOpen(true);
+    }, []);
+    const closeLog = React.useCallback(() => {
+        setIsLogDialogOpen(false);
+    }, []);
+    return {
+        taskId,
+        runTask,
+        stopTask,
+        openLog,
+        log,
+        lastMessage,
+        error,
+        status,
+        loading,
+        executionTime,
+        isLogDialogOpen,
+        closeLog,
+        result,
+    };
+};
 
-var img$7 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23DDE3EA'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='TXT'%3e%3cpath id='Vector_3' d='M10.6838 7.44043V9.9998H10.0668V7.44043H10.6838ZM11.4537 7.44043V7.9168H9.31445V7.44043H11.4537Z' fill='black'/%3e%3cpath id='Vector_4' d='M7.58164 7.44043L8 8.29121L8.41836 7.44043H9.12148L8.40781 8.70957L9.14082 9.9998H8.43066L8 9.1332L7.56934 9.9998H6.85742L7.59219 8.70957L6.87676 7.44043H7.58164Z' fill='black'/%3e%3cpath id='Vector_5' d='M5.91328 7.44043V9.9998H5.29629V7.44043H5.91328ZM6.6832 7.44043V7.9168H4.54395V7.44043H6.6832Z' fill='black'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useRemoteTask = ({ onUpdate } = {}) => {
+    const { api: api$1 } = useGlobalContext();
+    const { addSubscription, connection, unsubscribeById } = useServerNotificationsContext();
+    const runTask = React.useCallback((prototype) => new Promise((resolve, reject) => {
+        const start = async () => {
+            const resourceId = prototype.subTaskSettings?.[0]?.startParameters?.resourceId;
+            let prototypeId = await api$1.remoteTaskManager.createTaskPrototype(prototype);
+            prototypeId = prototypeId.replace(/["']+/g, "");
+            const { id: taskId, success } = await api$1.remoteTaskManager.startTask1(prototypeId);
+            if (!success || !taskId) {
+                reject(new Error("startTask returned no taskId"));
+                return;
+            }
+            const subscriptionId = await addSubscription({
+                tag: "python_task_progress_event",
+                resourceId,
+            });
+            const onNotification = ({ data }) => {
+                if (data?.taskId !== taskId) {
+                    return;
+                }
+                onUpdate?.({ status: data.status, log: data.log });
+                const isCompleted = data.status === api.RemoteTaskStatus.Completed;
+                const isError = data.status === api.RemoteTaskStatus.Error;
+                if (isCompleted || isError) {
+                    connection?.off(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
+                    if (subscriptionId) {
+                        unsubscribeById(subscriptionId);
+                    }
+                    resolve({
+                        taskId,
+                        status: isCompleted ? api.RemoteTaskStatus.Completed : api.RemoteTaskStatus.Error,
+                        log: data.log,
+                    });
+                }
+            };
+            connection?.on(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
+        };
+        start().catch(reject);
+    }), [api$1, addSubscription, connection, unsubscribeById, onUpdate]);
+    return { runTask };
+};
 
-var img$6 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%2341A246'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='XLSX'%3e%3cpath id='Vector_3' d='M10.983 7.44043L11.4014 8.29121L11.8197 7.44043H12.5229L11.8092 8.70957L12.5422 9.9998H11.832L11.4014 9.1332L10.9707 9.9998H10.2588L10.9936 8.70957L10.2781 7.44043H10.983Z' fill='white'/%3e%3cpath id='Vector_4' d='M9.41172 9.31953C9.41172 9.27969 9.40586 9.24395 9.39414 9.2123C9.38242 9.17949 9.36074 9.14902 9.3291 9.1209C9.29746 9.09277 9.25176 9.06465 9.19199 9.03652C9.1334 9.00723 9.05605 8.97676 8.95996 8.94512C8.84746 8.90762 8.73906 8.86543 8.63477 8.81855C8.53047 8.77051 8.4373 8.71484 8.35527 8.65156C8.27324 8.58711 8.2082 8.51211 8.16016 8.42656C8.11211 8.33984 8.08809 8.23906 8.08809 8.12422C8.08809 8.01406 8.1127 7.91504 8.16191 7.82715C8.21113 7.73809 8.27969 7.6625 8.36758 7.60039C8.45664 7.53711 8.56094 7.48906 8.68047 7.45625C8.8 7.42227 8.93066 7.40527 9.07246 7.40527C9.25996 7.40527 9.4252 7.43809 9.56816 7.50371C9.7123 7.56816 9.8248 7.66016 9.90566 7.77969C9.9877 7.89805 10.0287 8.03809 10.0287 8.1998H9.41523C9.41523 8.13535 9.40176 8.07852 9.3748 8.0293C9.34902 7.98008 9.30977 7.94141 9.25703 7.91328C9.2043 7.88516 9.13809 7.87109 9.0584 7.87109C8.98105 7.87109 8.91602 7.88281 8.86328 7.90625C8.81055 7.92969 8.7707 7.96133 8.74375 8.00117C8.7168 8.03984 8.70332 8.08262 8.70332 8.12949C8.70332 8.16816 8.71387 8.20332 8.73496 8.23496C8.75723 8.26543 8.78828 8.29414 8.82812 8.32109C8.86914 8.34805 8.91836 8.37383 8.97578 8.39844C9.03437 8.42305 9.1 8.44707 9.17266 8.47051C9.30859 8.51387 9.4293 8.5625 9.53477 8.61641C9.64141 8.66914 9.73105 8.72949 9.80371 8.79746C9.87754 8.86426 9.9332 8.94043 9.9707 9.02598C10.0094 9.11152 10.0287 9.2082 10.0287 9.31602C10.0287 9.43086 10.0064 9.53281 9.96191 9.62187C9.91738 9.71094 9.85352 9.78652 9.77031 9.84863C9.68711 9.90957 9.5875 9.95586 9.47148 9.9875C9.35547 10.0191 9.22598 10.035 9.08301 10.035C8.95176 10.035 8.82227 10.0186 8.69453 9.98574C8.56797 9.95176 8.45312 9.9002 8.35 9.83105C8.24687 9.76074 8.16426 9.67109 8.10215 9.56211C8.04121 9.45195 8.01074 9.32129 8.01074 9.17012H8.62949C8.62949 9.24512 8.63945 9.3084 8.65937 9.35996C8.6793 9.41152 8.70859 9.45312 8.74727 9.48477C8.78594 9.51523 8.8334 9.5375 8.88965 9.55156C8.9459 9.56445 9.01035 9.5709 9.08301 9.5709C9.16152 9.5709 9.2248 9.55977 9.27285 9.5375C9.3209 9.51406 9.35605 9.48359 9.37832 9.44609C9.40059 9.40742 9.41172 9.36523 9.41172 9.31953Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.73301 9.5252V9.9998H6.43926V9.5252H7.73301ZM6.65898 7.44043V9.9998H6.04199V7.44043H6.65898Z' fill='white'/%3e%3cpath id='Vector_6' d='M4.1793 7.44043L4.59766 8.29121L5.01602 7.44043H5.71914L5.00547 8.70957L5.73848 9.9998H5.02832L4.59766 9.1332L4.16699 9.9998H3.45508L4.18984 8.70957L3.47441 7.44043H4.1793Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useAppHeight = () => {
+    React.useEffect(() => {
+        const setAppHeight = () => {
+            document.documentElement.style.setProperty("--app-height", `${window.innerHeight}px`);
+        };
+        window.addEventListener("resize", setAppHeight);
+        setAppHeight();
+        return () => {
+            window.removeEventListener("resize", setAppHeight);
+        };
+    }, []);
+};
 
-var img$5 = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='Frame'%3e%3cpath id='Vector' d='M13 16H3C2.4 16 2 15.6 2 15V1C2 0.4 2.4 0 3 0H10L14 4V15C14 15.6 13.6 16 13 16Z' fill='%23F4BB0A'/%3e%3cpath id='Vector_2' opacity='0.36' d='M14 4L10 0V3C10 3.6 10.4 4 11 4H14Z' fill='white'/%3e%3cg id='ZIP'%3e%3cpath id='Vector_3' d='M9.78789 9.13145H9.15156V8.65508H9.78789C9.87461 8.65508 9.94492 8.64043 9.99883 8.61113C10.0527 8.58184 10.092 8.54141 10.1166 8.48984C10.1424 8.43711 10.1553 8.37793 10.1553 8.3123C10.1553 8.24199 10.1424 8.17695 10.1166 8.11719C10.092 8.05742 10.0527 8.00937 9.99883 7.97305C9.94492 7.93555 9.87461 7.9168 9.78789 7.9168H9.38359V9.9998H8.7666V7.44043H9.78789C9.99297 7.44043 10.1693 7.47793 10.317 7.55293C10.4658 7.62793 10.5801 7.73105 10.6598 7.8623C10.7395 7.99238 10.7793 8.14121 10.7793 8.30879C10.7793 8.47402 10.7395 8.61816 10.6598 8.74121C10.5801 8.86426 10.4658 8.96035 10.317 9.02949C10.1693 9.09746 9.99297 9.13145 9.78789 9.13145Z' fill='white'/%3e%3cpath id='Vector_4' d='M8.23242 7.44043V9.9998H7.61719V7.44043H8.23242Z' fill='white'/%3e%3cpath id='Vector_5' d='M7.19551 9.5252V9.9998H5.34277V9.5252H7.19551ZM7.1832 7.75684L5.64863 9.9998H5.20215V9.67461L6.7543 7.44043H7.1832V7.75684ZM6.98457 7.44043V7.9168H5.19336V7.44043H6.98457Z' fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const useDebouncedCallback = (interval) => {
+    return React.useMemo(() => debounce((cb) => {
+        cb();
+    }, interval), [interval]);
+};
 
-const getFileTypeIcon = (fileType) => {
-    switch (fileType) {
-        case FileType.CSV:
-            return img$i;
-        case FileType.XLSX:
-            return img$6;
-        case FileType.DOCX:
-            return img$h;
-        case FileType.PDF:
-            return img$c;
-        case FileType.JSON:
-            return img$e;
-        case FileType.KML:
-            return img$d;
-        case FileType.PPTX:
-            return img$a;
-        case FileType.SHP:
-            return img$8;
-        case FileType.TXT:
-            return img$7;
-        case FileType.ZIP:
-            return img$5;
-        case FileType.IMAGE:
-        case FileType.JPEG:
-            return img$g;
-        case FileType.JPG:
-            return img$f;
-        case FileType.PNG:
-            return img$b;
-        case FileType.PYTHON:
-            return img$9;
-        default:
-            return img$j;
-    }
+const useToggle = (initial) => {
+    const [state, setState] = React.useState(initial !== undefined ? initial : false);
+    const toggle = React.useCallback(() => setState(!state), [state]);
+    return [state, toggle, setState];
 };
 
-const useAttachmentPreviewImages = ({ items, active, }) => {
-    const { api } = useGlobalContext();
-    const [blobUrls, setBlobUrls] = React.useState({});
-    const [failedLinks, setFailedLinks] = React.useState({});
-    const inFlightRef = React.useRef(new Set());
-    const blobUrlsRef = React.useRef(blobUrls);
-    blobUrlsRef.current = blobUrls;
+const DEBOUNCE_DELAY = 144;
+const useWindowResize = (callback, delay) => {
+    const debounceCallback = React.useMemo(() => {
+        return callback ? debounce(callback, delay || DEBOUNCE_DELAY) : undefined;
+    }, [callback, delay]);
     React.useEffect(() => {
-        if (!active || !api?.catalog?.getFile)
-            return;
-        items.forEach(item => {
-            const fileType = getFileType(item.mimeType, item.name);
-            const isImage = IMAGE_FILE_TYPES.includes(fileType);
-            if (!isImage || item.isExternal)
-                return;
-            if (blobUrlsRef.current[item.link] || inFlightRef.current.has(item.link))
-                return;
-            inFlightRef.current.add(item.link);
-            api.catalog
-                .getFile(item.link)
-                .then(blob => {
-                const objectUrl = URL.createObjectURL(blob);
-                setBlobUrls(prev => ({ ...prev, [item.link]: objectUrl }));
-            })
-                .catch(() => {
-                setFailedLinks(prev => (prev[item.link] ? prev : { ...prev, [item.link]: true }));
-            })
-                .finally(() => {
-                inFlightRef.current.delete(item.link);
-            });
-        });
-    }, [active, api, items]);
-    React.useEffect(() => () => {
-        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
-    }, []);
-    return React.useMemo(() => items.map(item => {
-        const fileType = getFileType(item.mimeType, item.name);
-        const isImage = IMAGE_FILE_TYPES.includes(fileType);
-        const fileName = item.name;
-        if (!isImage)
-            return { src: getFileTypeIcon(fileType), fileName };
-        if (item.isExternal)
-            return { src: item.link, fileName };
-        const hasError = !!failedLinks[item.link];
-        const blobUrl = blobUrls[item.link];
-        return {
-            src: blobUrl ?? "",
-            fileName,
-            hasError,
-            isLoading: !hasError && !blobUrl,
-        };
-    }), [items, blobUrls, failedLinks]);
+        debounceCallback && window.addEventListener("resize", debounceCallback);
+        return () => debounceCallback && window.removeEventListener("resize", debounceCallback);
+    }, [debounceCallback]);
 };
 
-const useAutoCompleteControl = (items) => {
-    const [value, setValue] = React.useState("");
-    const [options, setOptions] = React.useState([]);
-    const staticOptions = React.useMemo(() => (items ?? [])
-        .filter(Boolean)
-        .map(item => ({ text: String(item), value: String(item) })), [items]);
-    const onChange = React.useCallback((newValue) => setValue(newValue), []);
-    return {
-        value,
-        setValue,
-        onChange,
-        options: staticOptions.length ? staticOptions : options,
-        setOptions,
-    };
+const useContainerAttributes = ({ elementConfig, type, renderElement }) => {
+    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
+    const { options } = elementConfig || {};
+    const { attributes: optionAttributes, useProjectHiddenAttributes } = options || {};
+    const { attributes: contextAttributes, layerInfo } = useWidgetContext(type);
+    const [hiddenAttributes] = useLayerHiddenAttributes(layerInfo?.name ?? "");
+    const attributesToRender = React.useMemo(() => {
+        if (!optionAttributes)
+            return null;
+        const baseList = optionAttributes.length === 0
+            ? contextAttributes?.map(({ attributeName }) => attributeName) ?? []
+            : optionAttributes;
+        if (!useProjectHiddenAttributes)
+            return baseList;
+        return baseList.filter(attribute => !hiddenAttributes.includes(attribute));
+    }, [optionAttributes, contextAttributes, hiddenAttributes, useProjectHiddenAttributes]);
+    return { getRenderContainerItem, attributesToRender };
 };
 
 /**
@@ -6701,10 +7148,15 @@ const useAutoCompleteControl = (items) => {
  * `data-id` и `$noMargin` раньше жили на внешней обёртке `ElementValueWrapper`; она вешала их
  * на второй узел поверх этого корня, дублируя стили, и для таких контейнеров больше не создаётся
  * (см. `ROOT_OWNING_TEMPLATES`).
+ *
+ * Пропсы хоста фонового слоя (`$hasBgImage`, `$innerPadding`) подмешиваются здесь, а не в каждом
+ * контейнере: корень и так получает пропсы одним спредом, поэтому фон и внутренний отступ
+ * включаются без единой дополнительной строки на месте вызова.
  */
 const useWrapperSize = ({ elementConfig, defaults }) => {
     const { id, style, templateName, options } = elementConfig || {};
     const { width, height, overflow, noMargin, autoHeight } = options || {};
+    const bgHost = useBgImageHost(elementConfig);
     return React.useMemo(() => ({
         id,
         "data-id": id,
@@ -6720,7 +7172,8 @@ const useWrapperSize = ({ elementConfig, defaults }) => {
             heightAsMin: autoHeight,
         }),
         $noMargin: noMargin,
-    }), [id, templateName, style, width, height, overflow, noMargin, autoHeight, defaults]);
+        ...bgHost,
+    }), [id, templateName, style, width, height, overflow, noMargin, autoHeight, defaults, bgHost]);
 };
 
 /**
@@ -7537,110 +7990,55 @@ const useDiffPage = (type) => {
  * Натуральная ширина каждой плитки измеряется через временное inline `width: max-content`
  * (снимает применённое ограничение `--tile-width`, поэтому замер устойчив к динамике данных и не
  * зацикливает ResizeObserver — итоговый максимум совпадает с уже применённым). Возвращаемое число
- * контейнер прокидывает в CSS-переменную `--tile-width`, которую читает каждая плитка.
- *
- * Результат ограничен шириной ячейки ряда: плитка задаёт свою ширину в пикселях и в grid не
- * сжимается вместе с треком (`flex-shrink` там не действует, а `min-width: 0` базового
- * контейнера позволяет треку ужаться), поэтому натуральная ширина шире ячейки означала бы
- * наложение соседних плиток друг на друга.
- *
- * `enabled: false` полностью отключает измерение — ширина берётся из grid-ячейки.
- */
-const useEqualTileWidth = ({ enabled, itemsCount, columns, gap, }) => {
-    const ref = React.useRef(null);
-    const [width, setWidth] = React.useState();
-    const measure = React.useCallback(() => {
-        const node = ref.current;
-        if (!node)
-            return;
-        const tiles = Array.from(node.querySelectorAll("[data-tile]"));
-        if (!tiles.length)
-            return;
-        // Ширина ряда снимается до замера: временный `max-content` может распереть содержимое.
-        const available = columns > 0 ? (node.clientWidth - gap * (columns - 1)) / columns : 0;
-        tiles.forEach(tile => {
-            tile.style.width = "max-content";
-        });
-        let max = 0;
-        tiles.forEach(tile => {
-            max = Math.max(max, tile.getBoundingClientRect().width);
-        });
-        tiles.forEach(tile => {
-            tile.style.width = "";
-        });
-        // Ограниченную ширину округляем вниз — иначе округление вернуло бы ряд за границы контейнера.
-        const next = available > 0 && max > available ? Math.floor(available) : Math.ceil(max);
-        setWidth(previous => (max && previous !== next ? next : previous));
-    }, [columns, gap]);
-    React.useEffect(() => {
-        if (!enabled) {
-            setWidth(undefined);
-            return;
-        }
-        const node = ref.current;
-        if (!node)
-            return;
-        measure();
-        const observer = new ResizeObserver(() => measure());
-        observer.observe(node);
-        return () => observer.disconnect();
-    }, [enabled, itemsCount, measure]);
-    return [ref, enabled ? width : undefined];
-};
-
-const SERVER_NOTIFICATION_EVENT = {
-    ReceiveFeaturesUpdate: "ReceiveFeaturesUpdateNotification",
-    PythonProgressNotification: "ReceivePythonProgressNotification",
-    PythonSandboxStats: "ReceivePythonSandboxStatsNotification",
-};
-const POLL_SUBTASK_INTERVAL_MS = 500;
-const POLL_SUBTASK_TIMEOUT_MS = 15_000;
-
-const useServerNotificationsContext = () => {
-    return React.useContext(ServerNotificationsContext);
-};
-
-const useRemoteTask = ({ onUpdate } = {}) => {
-    const { api: api$1 } = useGlobalContext();
-    const { addSubscription, connection, unsubscribeById } = useServerNotificationsContext();
-    const runTask = React.useCallback((prototype) => new Promise((resolve, reject) => {
-        const start = async () => {
-            const resourceId = prototype.subTaskSettings?.[0]?.startParameters?.resourceId;
-            let prototypeId = await api$1.remoteTaskManager.createTaskPrototype(prototype);
-            prototypeId = prototypeId.replace(/["']+/g, "");
-            const { id: taskId, success } = await api$1.remoteTaskManager.startTask1(prototypeId);
-            if (!success || !taskId) {
-                reject(new Error("startTask returned no taskId"));
-                return;
-            }
-            const subscriptionId = await addSubscription({
-                tag: "python_task_progress_event",
-                resourceId,
-            });
-            const onNotification = ({ data }) => {
-                if (data?.taskId !== taskId) {
-                    return;
-                }
-                onUpdate?.({ status: data.status, log: data.log });
-                const isCompleted = data.status === api.RemoteTaskStatus.Completed;
-                const isError = data.status === api.RemoteTaskStatus.Error;
-                if (isCompleted || isError) {
-                    connection?.off(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
-                    if (subscriptionId) {
-                        unsubscribeById(subscriptionId);
-                    }
-                    resolve({
-                        taskId,
-                        status: isCompleted ? api.RemoteTaskStatus.Completed : api.RemoteTaskStatus.Error,
-                        log: data.log,
-                    });
-                }
-            };
-            connection?.on(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
-        };
-        start().catch(reject);
-    }), [api$1, addSubscription, connection, unsubscribeById, onUpdate]);
-    return { runTask };
+ * контейнер прокидывает в CSS-переменную `--tile-width`, которую читает каждая плитка.
+ *
+ * Результат ограничен шириной ячейки ряда: плитка задаёт свою ширину в пикселях и в grid не
+ * сжимается вместе с треком (`flex-shrink` там не действует, а `min-width: 0` базового
+ * контейнера позволяет треку ужаться), поэтому натуральная ширина шире ячейки означала бы
+ * наложение соседних плиток друг на друга.
+ *
+ * `enabled: false` полностью отключает измерение — ширина берётся из grid-ячейки.
+ */
+const useEqualTileWidth = ({ enabled, itemsCount, columns, gap, }) => {
+    const ref = React.useRef(null);
+    const [width, setWidth] = React.useState();
+    const measure = React.useCallback(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        const tiles = Array.from(node.querySelectorAll("[data-tile]"));
+        if (!tiles.length)
+            return;
+        // Ширина ряда снимается до замера: временный `max-content` может распереть содержимое.
+        const available = columns > 0 ? (node.clientWidth - gap * (columns - 1)) / columns : 0;
+        tiles.forEach(tile => {
+            tile.style.width = "max-content";
+        });
+        let max = 0;
+        tiles.forEach(tile => {
+            max = Math.max(max, tile.getBoundingClientRect().width);
+        });
+        tiles.forEach(tile => {
+            tile.style.width = "";
+        });
+        // Ограниченную ширину округляем вниз — иначе округление вернуло бы ряд за границы контейнера.
+        const next = available > 0 && max > available ? Math.floor(available) : Math.ceil(max);
+        setWidth(previous => (max && previous !== next ? next : previous));
+    }, [columns, gap]);
+    React.useEffect(() => {
+        if (!enabled) {
+            setWidth(undefined);
+            return;
+        }
+        const node = ref.current;
+        if (!node)
+            return;
+        measure();
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [enabled, itemsCount, measure]);
+    return [ref, enabled ? width : undefined];
 };
 
 const SAVE_HOOK_RESULT_DURATION = 4000;
@@ -8020,417 +8418,139 @@ const useWidgetFilters = (type, filterName, items) => {
         }, { min: null, max: null }) || {};
         changeFilters({ [filterName]: { value, min, max } }, configFilter?.resetFilters);
     }, [filters, currentPage.filters, filterName, configFilter, items, changeFilters]);
-    return { filters, formatFilterColor, hasAnyFilter, isFiltered, onFilter };
-};
-
-const useGetConfigLayer = () => {
-    const { currentPage } = useWidgetPage();
-    return React.useCallback((layerName) => currentPage?.layers?.find(({ name }) => name === layerName), [currentPage?.layers]);
-};
-
-const useHideIfEmptyDataSource = (type = exports.WidgetType.Dashboard) => {
-    const { dataSources } = useWidgetContext(type);
-    return React.useCallback((dataSourceName) => {
-        if (!dataSourceName)
-            return false;
-        return !getDataSource(dataSourceName, dataSources)?.features?.length;
-    }, [dataSources]);
-};
-
-const useProjectDashboardInit = () => {
-    const { projectInfo, updateProject } = useWidgetContext();
-    return React.useCallback(() => {
-        if (!projectInfo || !lodash.isEmpty(projectInfo.content?.dashboardConfiguration)) {
-            return;
-        }
-        const { alias, name } = projectInfo;
-        const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
-        newProjectInfo.content.dashboardConfiguration = getDefaultConfig({ title: alias || name });
-        updateProject(newProjectInfo);
-    }, [projectInfo, updateProject]);
-};
-
-const useRelatedDataSourceAttributes = ({ type = exports.WidgetType.Dashboard, elementConfig, dataSources, feature, }) => {
-    const { layerInfos } = useWidgetContext(type);
-    const { currentPage } = useWidgetPage(type);
-    const { options } = elementConfig || {};
-    const { relatedDataSource } = options || {};
-    const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
-    const configDataSource = React.useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource), [currentPage?.dataSources, relatedDataSource]);
-    const layerInfo = React.useMemo(() => getDataSourceLayerInfo({ layerInfos, configDataSource, fetchedDataSource: dataSource }) ||
-        EMPTY_DATA_SOURCE_LAYER_INFO, [configDataSource, dataSource, layerInfos]);
-    const attributes = React.useMemo(() => getFeatureAttributes(feature, layerInfo, dataSource), [dataSource, feature, layerInfo]);
-    return { layerInfo, attributes, dataSource, configDataSource };
-};
-
-const useRenderElement = (type = exports.WidgetType.Dashboard, elementConfig) => {
-    const { t } = useGlobalContext();
-    const { selectedTabId, setSelectedTabId, expandedContainers, layerInfo, attributes } = useWidgetContext(type);
-    const { config } = useWidgetConfig(type);
-    const { pageIndex } = useWidgetPage(type);
-    return React.useMemo(() => getRenderElement({
-        t,
-        type,
-        config,
-        elementConfig,
-        layerInfo,
-        attributes,
-        expandedContainers,
-        pageIndex,
-        selectedTabId,
-        setSelectedTabId,
-    }), [
-        attributes,
-        config,
-        elementConfig,
-        expandedContainers,
-        layerInfo,
-        pageIndex,
-        selectedTabId,
-        setSelectedTabId,
-        type,
-    ]);
-};
-
-/** Пустой бокс на отключённом пути — стабильная ссылка, чтобы не плодить ре-рендеры. */
-const EMPTY_BOX = {};
-/**
- * Измеряет фактические ширину и высоту DOM-элемента и обновляет их на любой ресайз (ResizeObserver).
- *
- * Возвращает `[ref, box]`, где `box` — `{ width, height }` в пикселях (content-box) либо пустой объект,
- * пока элемент ещё не измерен. Используется для «резинового» графика: d3-графикам нужны конкретные
- * пиксельные размеры, а не CSS `100%`, а для вписывания (fit) нужны обе оси.
- *
- * `enabled: false` полностью отключает наблюдение — обычные (не fill) графики не измеряются
- * и не вызывают лишних ре-рендеров.
- */
-const useResizeBox = (enabled) => {
-    const ref = React.useRef(null);
-    const [box, setBox] = React.useState(EMPTY_BOX);
-    React.useEffect(() => {
-        const node = ref.current;
-        if (!enabled || !node)
-            return;
-        const observer = new ResizeObserver(([entry]) => {
-            const { width, height } = entry.contentRect;
-            setBox({ width, height });
-        });
-        observer.observe(node);
-        return () => observer.disconnect();
-    }, [enabled]);
-    return [ref, enabled ? box : EMPTY_BOX];
-};
-
-const useShownOtherItems = (options) => {
-    const [showMore, onShowMore] = useToggle();
-    const { shownItems } = options || {};
-    return {
-        sliceItems: (items) => sliceShownOtherItems(items, options, showMore),
-        checkIsSliced: (items) => !!shownItems && items?.length > shownItems,
-        onShowMore,
-        showMore,
-    };
-};
-
-const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerParams, eqlParameters, }) => {
-    const { dataSources } = useWidgetContext();
-    const { getDataSourcePromises, getUpdatedDataSources } = useDataSources({
-        type: exports.WidgetType.Dashboard,
-        config,
-        filters,
-        attributes,
-        layerParams,
-        eqlParameters,
-    });
-    return React.useCallback(async (newFilters, offset = 0) => {
-        return getDataSourcePromises(dataSource, newFilters, offset).then((response) => {
-            const settled = { status: "fulfilled", value: response };
-            const responseDataSources = getUpdatedDataSources([settled], [dataSource], dataSources);
-            return {
-                items: responseDataSources.find(({ name }) => name === dataSource.name).features,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                totalCount: response.totalCount,
-            };
-        });
-    }, [dataSource, getDataSourcePromises, getUpdatedDataSources, dataSources]);
-};
-
-const useMaxZoomTo = () => {
-    const { currentPage } = useWidgetPage();
-    return React.useCallback((layerName) => {
-        if (!layerName) {
-            return [currentPage?.options?.maxZoomTo, undefined];
-        }
-        return [currentPage?.options?.maxZoomTo, currentPage?.layers?.find(item => item.name === layerName)?.maxZoomTo];
-    }, [currentPage?.layers, currentPage?.options?.maxZoomTo]);
-};
-
-const useCustomFeatureSelect = () => {
-    const { currentPage } = useWidgetPage();
-    return React.useCallback((layerName) => {
-        if (!layerName) {
-            return [currentPage?.options?.customFeatureSelect, undefined];
-        }
-        return [
-            currentPage?.options?.customFeatureSelect,
-            currentPage?.layers?.find(item => item.name === layerName)?.customFeatureSelect,
-        ];
-    }, [currentPage?.layers, currentPage?.options?.customFeatureSelect]);
-};
-
-const useCurrentPageLayers = () => {
-    const { currentPage } = useWidgetPage();
-    return React.useMemo(() => currentPage?.layers || [], [currentPage?.layers]);
-};
-
-const useLayerHiddenAttributes = (layerName) => {
-    const { currentPage, updateConfigPage } = useWidgetPage();
-    const layerHiddenAttributes = React.useMemo(() => {
-        return currentPage?.layers?.find(item => item.name === layerName)?.hiddenAttributes ?? [];
-    }, [currentPage?.layers, layerName]);
-    const updateLayerHiddenAttributes = React.useCallback((updatedHiddenAttributes) => {
-        updateConfigPage({
-            ...currentPage,
-            layers: currentPage?.layers?.map(item => {
-                return item.name === layerName
-                    ? {
-                        ...item,
-                        hiddenAttributes: updatedHiddenAttributes,
-                    }
-                    : item;
-            }),
-        });
-    }, [currentPage, layerName, updateConfigPage]);
-    return [layerHiddenAttributes, updateLayerHiddenAttributes];
-};
-
-const useVisibleProjectItems = (applyMinMaxScale) => {
-    const { map } = useMapContext();
-    const projectItems = useCurrentPageLayers();
-    const zoomChange = React.useMemo(() => (applyMinMaxScale && map.current?.getZoom() !== undefined ? Math.round(map.current?.getZoom()) : undefined), [applyMinMaxScale, map.current?.getZoom()]);
-    return React.useMemo(() => {
-        if (map.current?.getZoom() === undefined) {
-            return [];
-        }
-        return (projectItems?.filter(item => item.isVisible &&
-            (!applyMinMaxScale ||
-                (Math.round(map.current.getZoom()) >= (item.minScale ?? 0) &&
-                    Math.round(map.current.getZoom()) <= (item.maxScale ?? 30)))) ?? []);
-    }, [projectItems, zoomChange, applyMinMaxScale]);
-};
-
-const usePythonSandbox = () => {
-    const { api } = useGlobalContext();
-    const preparePythonSandbox = React.useCallback(({ resourceId, isNotebook = false }) => api.remoteTaskManager.post({
-        workerType: "pythonService",
-        methodType: "pythonrunner/prepare",
-        data: { resourceId, isNotebook },
-    }), [api.remoteTaskManager]);
-    return { preparePythonSandbox };
+    return { filters, formatFilterColor, hasAnyFilter, isFiltered, onFilter };
 };
 
-const FINAL_STATUSES = [
-    api.RemoteTaskStatus.Completed,
-    api.RemoteTaskStatus.Error,
-    api.RemoteTaskStatus.Interrupted,
-    api.RemoteTaskStatus.Timeout,
-];
-const wait = (ms) => new Promise(resolve => window.setTimeout(resolve, ms));
-const pollSubtaskCompletion = async ({ taskId, api, intervalMs = POLL_SUBTASK_INTERVAL_MS, timeoutMs = POLL_SUBTASK_TIMEOUT_MS, }) => {
-    const deadline = Date.now() + timeoutMs;
-    let subTask = (await api.remoteTaskManager.get(taskId))?.[0] ?? null;
-    while (subTask && !FINAL_STATUSES.includes(subTask.status)) {
-        if (Date.now() >= deadline)
-            return null;
-        await wait(intervalMs);
-        subTask = (await api.remoteTaskManager.get(taskId))?.[0] ?? null;
-    }
-    return subTask;
+const useGetConfigLayer = () => {
+    const { currentPage } = useWidgetPage();
+    return React.useCallback((layerName) => currentPage?.layers?.find(({ name }) => name === layerName), [currentPage?.layers]);
 };
 
-const usePythonTask = () => {
-    const { api: api$1, t } = useGlobalContext();
-    const { addSubscription, connection, unsubscribeById } = useServerNotificationsContext();
-    const { preparePythonSandbox } = usePythonSandbox();
-    const [status, setStatus] = React.useState(api.RemoteTaskStatus.Unknown);
-    const [log, setLog] = React.useState(null);
-    const [lastMessage, setLastMessage] = React.useState(null);
-    const [error, setError] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    const [executionTime, setExecutionTime] = React.useState(null);
-    const [taskId, setTaskId] = React.useState(null);
-    const [subscriptionId, setSubscriptionId] = React.useState(null);
-    const [isLogDialogOpen, setIsLogDialogOpen] = React.useState(false);
-    const [result, setResult] = React.useState(null);
-    const reset = React.useCallback(() => {
-        setStatus(api.RemoteTaskStatus.Unknown);
-        setError(null);
-        setLoading(false);
-        setExecutionTime(null);
-        setTaskId(null);
-        setSubscriptionId(null);
-        setResult(null);
-    }, []);
-    const runTask = React.useCallback(async ({ resourceId, parameters, script, fileName, methodName, }) => {
-        reset();
-        setStatus(api.RemoteTaskStatus.Process);
-        setLog(null);
-        setLastMessage(null);
-        setLoading(true);
-        const start = Date.now();
-        let prototypeId = await api$1.remoteTaskManager.createTaskPrototype({
-            enabled: true,
-            startIfPreviousError: true,
-            startIfPreviousNotFinished: true,
-            subTaskSettings: [
-                {
-                    type: "pythonService",
-                    startParameters: {
-                        resourceId,
-                        parameters,
-                        script,
-                        fileName,
-                        methodName,
-                        method: "pythonrunner/run",
-                    },
-                },
-            ],
-        });
-        prototypeId = prototypeId.replace(/["']+/g, "");
-        await preparePythonSandbox({ resourceId });
-        const { id: newTaskId, success } = await api$1.remoteTaskManager.startTask1(prototypeId);
-        if (!success) {
-            setStatus(api.RemoteTaskStatus.Error);
-            setLog(t("taskRunFail", { ns: "devMode", defaultValue: "Не удалось запустить задачу" }));
-            setExecutionTime(Date.now() - start);
-            setLoading(false);
-        }
-        const newSubscriptionId = await addSubscription({
-            tag: "python_task_progress_event",
-            resourceId,
-        });
-        setTaskId(newTaskId);
-        setSubscriptionId(newSubscriptionId);
-        const onNotification = async ({ data }) => {
-            if (data?.taskId === newTaskId) {
-                const isFinished = [api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status);
-                setStatus(data.status);
-                setLog(prev => [prev, data.log].filter(Boolean).join(""));
-                if (data.log)
-                    setLastMessage(data.log);
-                setExecutionTime(Date.now() - start);
-                setLoading(false);
-                setTaskId(isFinished ? null : newTaskId);
-                setSubscriptionId(isFinished ? null : newSubscriptionId);
-                if (isFinished) {
-                    unsubscribeById(newSubscriptionId);
-                    connection.off(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
-                }
-                if (data.status === api.RemoteTaskStatus.Completed) {
-                    try {
-                        const subTask = await pollSubtaskCompletion({ taskId: newTaskId, api: api$1 });
-                        if (subTask?.status === api.RemoteTaskStatus.Completed) {
-                            const response = subTask.results?.response;
-                            setResult(typeof response === "object" && response !== null
-                                ? response
-                                : null);
-                        }
-                        else {
-                            setError(new Error(t("taskResultUnavailable", {
-                                ns: "devMode",
-                                defaultValue: "Не удалось получить результат задачи",
-                            })));
-                        }
-                    }
-                    catch (e) {
-                        setError(e instanceof Error ? e : new Error(String(e)));
-                    }
-                }
-            }
-        };
-        connection.on(SERVER_NOTIFICATION_EVENT.PythonProgressNotification, onNotification);
-    }, [reset, api$1, preparePythonSandbox, addSubscription, connection, t, unsubscribeById]);
-    const stopTask = React.useCallback(async () => {
-        await api$1.remoteTaskManager.stop(taskId);
-        reset();
-        unsubscribeById(subscriptionId);
-    }, [api$1, reset, unsubscribeById, taskId, subscriptionId]);
-    const openLog = React.useCallback(() => {
-        setIsLogDialogOpen(true);
-    }, []);
-    const closeLog = React.useCallback(() => {
-        setIsLogDialogOpen(false);
-    }, []);
-    return {
-        taskId,
-        runTask,
-        stopTask,
-        openLog,
-        log,
-        lastMessage,
-        error,
-        status,
-        loading,
-        executionTime,
-        isLogDialogOpen,
-        closeLog,
-        result,
-    };
+const useHideIfEmptyDataSource = (type = exports.WidgetType.Dashboard) => {
+    const { dataSources } = useWidgetContext(type);
+    return React.useCallback((dataSourceName) => {
+        if (!dataSourceName)
+            return false;
+        return !getDataSource(dataSourceName, dataSources)?.features?.length;
+    }, [dataSources]);
 };
 
-const useAppHeight = () => {
-    React.useEffect(() => {
-        const setAppHeight = () => {
-            document.documentElement.style.setProperty("--app-height", `${window.innerHeight}px`);
-        };
-        window.addEventListener("resize", setAppHeight);
-        setAppHeight();
-        return () => {
-            window.removeEventListener("resize", setAppHeight);
-        };
-    }, []);
+const useProjectDashboardInit = () => {
+    const { projectInfo, updateProject } = useWidgetContext();
+    return React.useCallback(() => {
+        if (!projectInfo || !lodash.isEmpty(projectInfo.content?.dashboardConfiguration)) {
+            return;
+        }
+        const { alias, name } = projectInfo;
+        const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
+        newProjectInfo.content.dashboardConfiguration = getDefaultConfig({ title: alias || name });
+        updateProject(newProjectInfo);
+    }, [projectInfo, updateProject]);
 };
 
-const useDebouncedCallback = (interval) => {
-    return React.useMemo(() => debounce((cb) => {
-        cb();
-    }, interval), [interval]);
+const useRelatedDataSourceAttributes = ({ type = exports.WidgetType.Dashboard, elementConfig, dataSources, feature, }) => {
+    const { layerInfos } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const { options } = elementConfig || {};
+    const { relatedDataSource } = options || {};
+    const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
+    const configDataSource = React.useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource), [currentPage?.dataSources, relatedDataSource]);
+    const layerInfo = React.useMemo(() => getDataSourceLayerInfo({ layerInfos, configDataSource, fetchedDataSource: dataSource }) ||
+        EMPTY_DATA_SOURCE_LAYER_INFO, [configDataSource, dataSource, layerInfos]);
+    const attributes = React.useMemo(() => getFeatureAttributes(feature, layerInfo, dataSource), [dataSource, feature, layerInfo]);
+    return { layerInfo, attributes, dataSource, configDataSource };
 };
 
-const useToggle = (initial) => {
-    const [state, setState] = React.useState(initial !== undefined ? initial : false);
-    const toggle = React.useCallback(() => setState(!state), [state]);
-    return [state, toggle, setState];
+const useRenderElement = (type = exports.WidgetType.Dashboard, elementConfig) => {
+    const { t } = useGlobalContext();
+    const { selectedTabId, setSelectedTabId, expandedContainers, layerInfo, attributes } = useWidgetContext(type);
+    const { config } = useWidgetConfig(type);
+    const { pageIndex } = useWidgetPage(type);
+    return React.useMemo(() => getRenderElement({
+        t,
+        type,
+        config,
+        elementConfig,
+        layerInfo,
+        attributes,
+        expandedContainers,
+        pageIndex,
+        selectedTabId,
+        setSelectedTabId,
+    }), [
+        attributes,
+        config,
+        elementConfig,
+        expandedContainers,
+        layerInfo,
+        pageIndex,
+        selectedTabId,
+        setSelectedTabId,
+        type,
+    ]);
 };
 
-const DEBOUNCE_DELAY = 144;
-const useWindowResize = (callback, delay) => {
-    const debounceCallback = React.useMemo(() => {
-        return callback ? debounce(callback, delay || DEBOUNCE_DELAY) : undefined;
-    }, [callback, delay]);
+/** Пустой бокс на отключённом пути — стабильная ссылка, чтобы не плодить ре-рендеры. */
+const EMPTY_BOX = {};
+/**
+ * Измеряет фактические ширину и высоту DOM-элемента и обновляет их на любой ресайз (ResizeObserver).
+ *
+ * Возвращает `[ref, box]`, где `box` — `{ width, height }` в пикселях (content-box) либо пустой объект,
+ * пока элемент ещё не измерен. Используется для «резинового» графика: d3-графикам нужны конкретные
+ * пиксельные размеры, а не CSS `100%`, а для вписывания (fit) нужны обе оси.
+ *
+ * `enabled: false` полностью отключает наблюдение — обычные (не fill) графики не измеряются
+ * и не вызывают лишних ре-рендеров.
+ */
+const useResizeBox = (enabled) => {
+    const ref = React.useRef(null);
+    const [box, setBox] = React.useState(EMPTY_BOX);
     React.useEffect(() => {
-        debounceCallback && window.addEventListener("resize", debounceCallback);
-        return () => debounceCallback && window.removeEventListener("resize", debounceCallback);
-    }, [debounceCallback]);
+        const node = ref.current;
+        if (!enabled || !node)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const { width, height } = entry.contentRect;
+            setBox({ width, height });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [enabled]);
+    return [ref, enabled ? box : EMPTY_BOX];
 };
 
-const useContainerAttributes = ({ elementConfig, type, renderElement }) => {
-    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
-    const { options } = elementConfig || {};
-    const { attributes: optionAttributes, useProjectHiddenAttributes } = options || {};
-    const { attributes: contextAttributes, layerInfo } = useWidgetContext(type);
-    const [hiddenAttributes] = useLayerHiddenAttributes(layerInfo?.name ?? "");
-    const attributesToRender = React.useMemo(() => {
-        if (!optionAttributes)
-            return null;
-        const baseList = optionAttributes.length === 0
-            ? contextAttributes?.map(({ attributeName }) => attributeName) ?? []
-            : optionAttributes;
-        if (!useProjectHiddenAttributes)
-            return baseList;
-        return baseList.filter(attribute => !hiddenAttributes.includes(attribute));
-    }, [optionAttributes, contextAttributes, hiddenAttributes, useProjectHiddenAttributes]);
-    return { getRenderContainerItem, attributesToRender };
+const useShownOtherItems = (options) => {
+    const [showMore, onShowMore] = useToggle();
+    const { shownItems } = options || {};
+    return {
+        sliceItems: (items) => sliceShownOtherItems(items, options, showMore),
+        checkIsSliced: (items) => !!shownItems && items?.length > shownItems,
+        onShowMore,
+        showMore,
+    };
+};
+
+const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerParams, eqlParameters, }) => {
+    const { dataSources } = useWidgetContext();
+    const { getDataSourcePromises, getUpdatedDataSources } = useDataSources({
+        type: exports.WidgetType.Dashboard,
+        config,
+        filters,
+        attributes,
+        layerParams,
+        eqlParameters,
+    });
+    return React.useCallback(async (newFilters, offset = 0) => {
+        return getDataSourcePromises(dataSource, newFilters, offset).then((response) => {
+            const settled = { status: "fulfilled", value: response };
+            const responseDataSources = getUpdatedDataSources([settled], [dataSource], dataSources);
+            return {
+                items: responseDataSources.find(({ name }) => name === dataSource.name).features,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                totalCount: response.totalCount,
+            };
+        });
+    }, [dataSource, getDataSourcePromises, getUpdatedDataSources, dataSources]);
 };
 
 const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, }) => {
@@ -8470,6 +8590,7 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
 const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { width, height, overflow } = elementConfig?.options || {};
     const templateName = elementConfig?.templateName;
+    const bgHost = useBgImageHost(elementConfig);
     const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({
             style,
             width,
@@ -8477,7 +8598,7 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
             overflow,
             defaults: BASE_CONTAINER_STYLE,
             defaultWidth: FILL_SIZE,
-        }), children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName]);
+        }), ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: render }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName, bgHost, elementConfig]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -8495,7 +8616,7 @@ const FlowGroup = React.memo(({ elementConfig, type, renderElement }) => {
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const { root, body } = useContainerRoot({ elementConfig, defaults: CONTAINERS_GROUP_DEFAULTS });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, isColumn: isColumn, "$alignItems": alignItems, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, isColumn: isColumn, "$alignItems": alignItems, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 /**
@@ -8636,17 +8757,39 @@ const GridContextMenu = React.memo(({ position, onClose }) => {
     return (jsxRuntime.jsx(uilibGl.Popup, { isVisible: true, interactive: true, appendTo: appendToBody, placement: "bottom-start", onRequestClose: onClose, getReferenceClientRect: getReferenceClientRect, anchor: ref => jsxRuntime.jsx(MenuAnchor, { ref: ref }), children: jsxRuntime.jsx(uilibGl.Menu, { options: options, selectOption: handleSelect }) }));
 });
 
-const AddFeatureContainer = React.memo(({ elementConfig }) => {
+/**
+ * Фоновое изображение контейнера — универсальный слот `bgImage`.
+ *
+ * Ставится первым ребёнком корня контейнера; корень обязан быть хостом слоя
+ * (`bgImageHostMixin` + проп `$hasBgImage`, у контейнеров на `useContainerRoot` он приходит
+ * готовым в `root`).
+ *
+ * Слота нет в конфиге — в DOM не появляется ничего: ни обёртки, ни пустого слоя.
+ *
+ * `options.outflow` читает слой, а не хост: вылет за края — свойство картинки, а раскладка
+ * контейнера от него не меняется.
+ */
+const ContainerBackground = React.memo(({ elementConfig, renderElement }) => {
+    const hasBgImage = React.useMemo(() => hasContainerBgImage(elementConfig), [elementConfig]);
+    if (!hasBgImage || !renderElement)
+        return null;
+    return (jsxRuntime.jsx(ContainerBackgroundLayer, { "$outflow": elementConfig?.options?.outflow, children: renderElement({ id: BG_IMAGE_SLOT_ID, wrap: false }) }));
+});
+
+const AddFeatureContainer = React.memo(({ elementConfig, renderElement }) => {
     const { id, children, style } = elementConfig || {};
-    return (jsxRuntime.jsx(Container, { id: id, style: style, children: children
-            .filter(({ type }) => type === "button")
-            .map(({ options }, index) => (jsxRuntime.jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index))) }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, style: style, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), children
+                .filter(({ type }) => type === "button")
+                .map(({ options }, index) => (jsxRuntime.jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index)))] }));
 });
 
 const AttachmentsContainer = styled.div.withConfig({ displayName: "AttachmentsContainer", componentId: "sc-1y13q8d" }) `
   display: flex;
   flex-direction: column;
   width: 100%;
+
+  ${bgImageHostMixin};
 `;
 const AttachmentsHeaderRow = styled.div.withConfig({ displayName: "AttachmentsHeaderRow", componentId: "sc-l7u1q7" }) `
   &&& {
@@ -9009,7 +9152,7 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
                                 ns: "common",
                                 defaultValue: "Ресурс недоступен",
                             }) }, previewIndex))] }) }))] }));
@@ -9021,7 +9164,7 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const { root, body } = useContainerRoot({ elementConfig });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 /**
@@ -9052,7 +9195,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const InnerContainerWrapper = styled.div.withConfig({ displayName: "InnerContainerWrapper", componentId: "sc-1a1fl7q" }) `
@@ -9081,6 +9224,16 @@ const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, m
     });
     const { options, children } = elementConfig || {};
     const { relatedDataSource, filterName, column } = options || {};
+    /**
+     * Конфиг записи — тот же узел хоста, но без слота фона.
+     *
+     * У `DataSource`/`DataSourceProgress` дети — слоты ВНУТРЕННЕГО шаблона, поэтому `bgImage`
+     * достался бы и хосту, и каждой записи: одна картинка нарисовалась бы дважды. Фон остаётся
+     * за хостом (он и есть контейнер), а записи получают конфиг без слота.
+     */
+    const innerConfig = React.useMemo(() => elementConfig && children?.some(({ id }) => id === BG_IMAGE_SLOT_ID)
+        ? { ...elementConfig, children: children.filter(({ id }) => id !== BG_IMAGE_SLOT_ID) }
+        : elementConfig, [elementConfig, children]);
     const aliasElement = React.useMemo(() => children?.find(({ id }) => id === "alias"), [children]);
     const valueElement = React.useMemo(() => children?.find(({ id }) => id === "value"), [children]);
     const aliasAttribute = React.useMemo(() => (aliasElement ? attributes?.find(({ attributeName }) => attributeName === aliasElement.attributeName) : null), [aliasElement, attributes]);
@@ -9123,7 +9276,7 @@ const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, m
     if (!InnerContainer) {
         return null;
     }
-    return (jsxRuntime.jsx(InnerContainerWrapper, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(value), column: column === undefined || column, onClick: filterName ? () => onFilter(value) : undefined, children: jsxRuntime.jsx(InnerContainer, { config: config, elementConfig: elementConfig, feature: feature, maxValue: maxValue, type: type, index: index, renderElement: render }) }));
+    return (jsxRuntime.jsx(InnerContainerWrapper, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(value), column: column === undefined || column, onClick: filterName ? () => onFilter(value) : undefined, children: jsxRuntime.jsx(InnerContainer, { config: config, elementConfig: innerConfig, feature: feature, maxValue: maxValue, type: type, index: index, renderElement: render }) }));
 });
 
 const DataSourceProgressContainerWrapper = styled.div.withConfig({ displayName: "DataSourceProgressContainerWrapper", componentId: "sc-d525nv" }) `
@@ -9211,7 +9364,7 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
     if (dataSource && !dataSource.features) {
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DataSourceContainerWrapper, { ...body, ref: tilesRef, isColumn: column, "$isRow": !column, "$columns": columns, "$gap": gap, "$align": align, "$stretch": stretch, "$tileWidth": tileWidth, children: sliceItems(dataSource.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) }), checkIsSliced(dataSource.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DataSourceContainerWrapper, { ...body, ref: tilesRef, isColumn: column, "$isRow": !column, "$columns": columns, "$gap": gap, "$align": align, "$stretch": stretch, "$tileWidth": tileWidth, children: sliceItems(dataSource.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) }), checkIsSliced(dataSource.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore
                             ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" })
                             : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) }))] })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
@@ -9220,6 +9373,8 @@ const ProgressContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName:
   align-items: center;
   width: 100%;
   margin-bottom: 1rem;
+
+  ${bgImageHostMixin};
 `;
 const ProgressIcon = styled.div.withConfig({ displayName: "ProgressIcon", componentId: "sc-1e9hoh1" }) `
   margin-right: 0.5rem;
@@ -9355,15 +9510,28 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { ...body, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", {
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { ...body, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", {
                             ns: "dashboard",
                             defaultValue: "Показать все",
                         }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
-const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
+const DefaultAttributesContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { attributes } = useWidgetContext(type);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributes?.map(({ attributeName }) => (jsxRuntime.jsx(Container, { isColumn: true, children: renderElement({ id: attributeName }) }, attributeName))) }));
+    const bgHost = useBgImageHost(elementConfig);
+    const needsHost = !!bgHost.$hasBgImage || !!bgHost.$innerPadding;
+    /*
+      `isColumn` обязателен: без него срабатывает row-ветка Container, а правило
+      `> * { width: 100% }` есть только в column-ветке. Тогда строка атрибута схлопывается
+      по своему контенту, и подписи со значениями перестают выстраиваться в две колонки.
+    */
+    const rows = React.useMemo(() => attributes?.map(({ attributeName }) => (jsxRuntime.jsx(Container, { isColumn: true, children: renderElement({ id: attributeName }) }, attributeName))), [attributes, renderElement]);
+    // Без фона контейнер намеренно отдаёт НЕСКОЛЬКО корней: каждая строка атрибута — отдельная
+    // ячейка родительской колонки. Общая обёртка появляется только под фон или `innerPadding`,
+    // которым иначе не от чего отсчитывать бокс, — и только если автор конфига их попросил.
+    if (!needsHost)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows });
+    return (jsxRuntime.jsxs(Container, { isColumn: true, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), rows] }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider).withConfig({ displayName: "ContainerDivider", componentId: "sc-9zqdb0" }) `
@@ -9601,7 +9769,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { ...body, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0]?.options?.filterName })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { ...body, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0]?.options?.filterName })] }));
 });
 
 /** Размер, при котором контейнер занимает всю ячейку родителя. */
@@ -9857,10 +10025,10 @@ const readTrackPixels = (grid, axis) => {
 /**
  * Дети, которые реально становятся треками.
  *
- * `ContainerChildren` не рендерит слоты заголовка, поэтому и в `grid-template-*` их быть не
- * должно — иначе треков окажется больше, чем ячеек, и раскладка съедет.
+ * `ContainerChildren` не рендерит слоты заголовка и фон, поэтому и в `grid-template-*` их быть
+ * не должно — иначе треков окажется больше, чем ячеек, и раскладка съедет.
  */
-const getLayoutChildren = (node) => (node?.children ?? []).filter(({ id }) => !TITLE_SLOT_IDS.includes(id));
+const getLayoutChildren = (node) => (node?.children ?? []).filter(({ id }) => !NON_TRACK_SLOT_IDS.includes(id));
 /** Опция, в которой лежит доля трека: у строки это высота, у ячейки — ширина. */
 const getTrackSizeKey = (axis) => (axis === "row" ? "height" : "width");
 /**
@@ -10226,14 +10394,14 @@ const GridTrackContent = styled.div.withConfig({ displayName: "GridTrackContent"
 /** Узел-сетка: `ContainersGroup`, у которого включена опция `grid`. */
 const isGridNode = (node) => !!node?.options?.grid;
 /**
- * Подменяет «раскладочных» детей узла, сохраняя слоты заголовка.
+ * Подменяет «раскладочных» детей узла, сохраняя слоты заголовка и фона.
  *
  * Слоты кладутся первыми: их порядок относительно тела ни на что не влияет — тело их отфильтровывает,
- * а `ExpandableTitle` ищет по `id`.
+ * а `ExpandableTitle` и `ContainerBackground` ищут по `id`.
  */
 const setLayoutChildren = (node, children) => ({
     ...node,
-    children: [...(node.children ?? []).filter(({ id }) => TITLE_SLOT_IDS.includes(id)), ...children],
+    children: [...(node.children ?? []).filter(({ id }) => NON_TRACK_SLOT_IDS.includes(id)), ...children],
 });
 /**
  * Иммутабельно применяет `mapper` к узлу с заданным `id` где угодно в поддереве.
@@ -10451,7 +10619,7 @@ const GridRowContainer = React.memo(({ elementConfig, renderElement }) => {
         elementConfig,
         defaults: autoHeight ? GRID_AUTO_FILL_DEFAULTS : GRID_FILL_DEFAULTS,
     });
-    return (jsxRuntime.jsx(ContainerRoot, { ...root, children: jsxRuntime.jsx(GridTracks, { node: elementConfig, axis: "column", body: body, gap: gap, renderElement: renderElement }) }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(GridTracks, { node: elementConfig, axis: "column", body: body, gap: gap, renderElement: renderElement })] }));
 });
 
 const IconContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "IconContainerWrapper", componentId: "sc-1eg4h9n" }) `
@@ -10462,6 +10630,8 @@ const IconContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Ico
   background-color: ${({ theme: { palette } }) => palette.element};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
   overflow: hidden;
+
+  ${bgImageHostMixin};
 `;
 const IconContainerHeaderWrapper = styled(uilibGl.Flex).withConfig({ displayName: "IconContainerHeaderWrapper", componentId: "sc-1johipv" }) `
   justify-content: space-between;
@@ -10504,10 +10674,11 @@ const IconContainerText = styled.div.withConfig({ displayName: "IconContainerTex
 
 const IconContainer = React.memo(({ elementConfig, renderElement }) => {
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(IconContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(IconContainerHeaderWrapper, { children: [jsxRuntime.jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsxRuntime.jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsxRuntime.jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(IconContainerWrapper, { id: id, style: style, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(IconContainerHeaderWrapper, { children: [jsxRuntime.jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsxRuntime.jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsxRuntime.jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
 });
 
-const ImageContainerBg$1 = styled.div.withConfig({ displayName: "ImageContainerBg", componentId: "sc-cezopj" }) `
+const ImageContainerBg = styled.div.withConfig({ displayName: "ImageContainerBg", componentId: "sc-cezopj" }) `
   position: absolute;
   top: 0;
   bottom: 0;
@@ -10568,11 +10739,12 @@ const ImageContainerWrapper = styled(uilibGl.Flex).withConfig({ displayName: "Im
 
   ${sizeCssMixin};
   ${noMarginMixin};
+  ${bgImageHostMixin};
 `;
 
 const ImageContainer = React.memo(({ elementConfig, renderElement }) => {
     const root = useWrapperSize({ elementConfig });
-    return (jsxRuntime.jsxs(ImageContainerWrapper, { ...root, children: [jsxRuntime.jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsxRuntime.jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
+    return (jsxRuntime.jsxs(ImageContainerWrapper, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({ id: "image" }) })] }));
 });
 
 const LayersContainerWrapper = styled(Container).withConfig({ displayName: "LayersContainerWrapper", componentId: "sc-1a97bv8" }) `
@@ -10630,7 +10802,7 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { ...body, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { ...body, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
@@ -10640,6 +10812,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
     const { options } = config || {};
     const { column, width } = options || {};
     const isColumn = column === undefined || column;
+    const bgHost = useBgImageHost(currentPage);
     const filteredChildren = React.useMemo(() => !selectedTabId
         ? currentPage.children
         : currentPage.children.filter(item => !item.options?.tabId || item.options.tabId === selectedTabId), [currentPage.children, selectedTabId]);
@@ -10665,7 +10838,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
         setSelectedTabId,
         type,
     ]);
-    return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: filteredChildren, isMain: true, renderElement: renderElement }) }));
+    return (jsxRuntime.jsxs(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: currentPage, renderElement: renderElement }), jsxRuntime.jsx(ContainerChildren, { type: type, items: filteredChildren, isMain: true, renderElement: renderElement })] }));
 });
 
 const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -10701,10 +10874,11 @@ const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue,
         wrap: false,
     }), [renderElement]);
     const renderTooltip = React.useMemo(() => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ProgressTooltipAlias, { children: renderTooltipAlias }), jsxRuntime.jsxs(ProgressTooltipValueContainer, { children: [jsxRuntime.jsx(ProgressTooltipValue, { children: renderTooltipValue }), jsxRuntime.jsx(ProgressTooltipValueOf, { children: t("of", { ns: "dashboard", defaultValue: "из" }) }), jsxRuntime.jsx("div", { children: formatAttributeValue({ t, type: valueType, value: currentMaxValue, stringFormat }) })] })] })), [currentMaxValue, renderTooltipAlias, renderTooltipValue, stringFormat, t, valueType]);
+    const bgHost = useBgImageHost(elementConfig);
     const color = React.useMemo(() => colorAttribute
         ? attributes?.find(({ attributeName }) => attributeName === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
-    return (jsxRuntime.jsx(uilibGl.Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxRuntime.jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, children: [renderIcon && jsxRuntime.jsx(ProgressIcon, { children: renderIcon }), jsxRuntime.jsxs(ProgressContent, { children: [!hideTitle && (jsxRuntime.jsxs(ProgressAlias, { children: [jsxRuntime.jsx("div", { children: renderAlias }), jsxRuntime.jsxs(ProgressValue, { children: [renderValue, unitsElement && jsxRuntime.jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxRuntime.jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsxRuntime.jsx(ProgressBarWrapper, { children: jsxRuntime.jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsxRuntime.jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxRuntime.jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), renderIcon && jsxRuntime.jsx(ProgressIcon, { children: renderIcon }), jsxRuntime.jsxs(ProgressContent, { children: [!hideTitle && (jsxRuntime.jsxs(ProgressAlias, { children: [jsxRuntime.jsx("div", { children: renderAlias }), jsxRuntime.jsxs(ProgressValue, { children: [renderValue, unitsElement && jsxRuntime.jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxRuntime.jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsxRuntime.jsx(ProgressBarWrapper, { children: jsxRuntime.jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsxRuntime.jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const StyledSvgWidthMixin = styled.css `
@@ -10887,6 +11061,8 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ disp
     margin-top: auto;
     padding-top: ${innerGapOr("0.25rem")};
   }
+
+  ${bgImageHostMixin};
 `;
 
 const ALIAS_DEFAULT_MAX_LENGTH = 28;
@@ -10904,6 +11080,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     const attributes = lodash.isEmpty(dsAttributes) ? ctxAttributes : dsAttributes;
     const { id, options, style, children } = elementConfig || {};
     const { maxLength, maxLines, wordBreak, center, fontColor, bgColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute, columns, innerGap } = options || {};
+    const bgHost = useBgImageHost(elementConfig);
     const iconElement = children?.find(item => item.id === "icon");
     const aliasElement = children?.find(item => item.id === "alias");
     const unitsElement = children?.find(item => item.id === "units");
@@ -10965,7 +11142,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     const renderValue = React.useMemo(() => lodash.isNil(value) ? null : (jsxRuntime.jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsxRuntime.jsx(ContainerUnits, { style: unitsElement?.style, children: unitsContent }))] })), [valueElement?.style, value, unitsElement, unitsContent]);
     if (lodash.isNil(value) && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { id: id, "data-tile": true, style: innerTemplateStyle || style, "$center": center !== false, "$color": color, "$bgColor": bgColor, "$iconColor": iconColor, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, "$fillWidth": !!columns, "$innerGap": innerGap, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { id: id, "data-tile": true, style: innerTemplateStyle || style, "$center": center !== false, "$color": color, "$bgColor": bgColor, "$iconColor": iconColor, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, "$fillWidth": !!columns, "$innerGap": innerGap, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
@@ -11004,7 +11181,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
     // Подпись `alias` не задают почти всегда — тогда обёртку не рендерим, чтобы в DOM не оставался
     // пустой блок, который вдобавок отъедал бы половину ширины у галереи (см. isColumn ниже).
     const aliasNode = render({ id: "alias" });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: render }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (
             // `isColumn`: подпись над галереей, а сама галерея на всю ширину. Без него Container
             // раскладывает alias и slideshow в ряд, и оба (Flex с `width: 100%`) сжимаются пополам —
             // картинка занимала лишь половину доступной ширины.
@@ -11032,21 +11209,11 @@ const DeleteRowDialog = ({ isOpen, isSourceRow, onConfirm, onCancel }) => {
     return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onCancel, modal: true, maxWidth: "28rem", minHeight: "0", children: [jsxRuntime.jsxs(uilibGl.DialogTitle, { children: [jsxRuntime.jsx(uilibGl.ActionsGroup, { children: title }), jsxRuntime.jsx(uilibGl.ActionsGroup, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onCancel }) })] }), jsxRuntime.jsx(uilibGl.DialogContent, { children: message }), jsxRuntime.jsx(uilibGl.DialogActions, { children: jsxRuntime.jsxs(uilibGl.ActionsGroup, { children: [jsxRuntime.jsx(uilibGl.FlatButton, { onClick: onCancel, children: t("actions.cancel", { ns: "common", defaultValue: "Отменить" }) }), jsxRuntime.jsx(uilibGl.RaisedButton, { error: true, onClick: onConfirm, children: t("actions.delete", { ns: "common", defaultValue: "Удалить" }) })] }) })] }));
 };
 
-/**
- * Панель действий: добавление строки слева, запись и откат — справа.
- *
- * Вторая группа прижимается к краю собственным `margin-left: auto`, а не раскладкой панели:
- * родительский `Container` в режиме колонки перебивает выравнивание своих детей
- * (`&&& > * { justify-content: flex-start }`), и `justify-content` здесь не сработал бы.
- */
+/** Панель действий: добавление строки слева, запись и откат — справа. */
 const StructuredDataToolbar = styled(uilibGl.Flex).withConfig({ displayName: "StructuredDataToolbar", componentId: "sc-w4ck72" }) `
   flex-shrink: 0;
   align-items: center;
   gap: 0.5rem;
-
-  > * + * {
-    margin-left: auto;
-  }
 `;
 /**
  * Группа кнопок панели. `width: auto` обязателен: базовый `Flex` растянут на 100%, и две
@@ -11058,6 +11225,16 @@ const StructuredDataActions = styled(uilibGl.Flex).withConfig({ displayName: "St
   align-items: center;
   gap: 0.5rem;
 `;
+/**
+ * Откат и запись. К правому краю их прижимает собственный `margin-left: auto`, а не раскладка
+ * панели: родительский `Container` в режиме колонки перебивает выравнивание своих детей
+ * (`&&& > * { justify-content: flex-start }`), и `justify-content` здесь не сработал бы. Отступ
+ * на самой группе, а не на соседе слева, — тогда пара стоит справа и без кнопки добавления
+ * (`editOnly` у представления).
+ */
+const StructuredDataSaveActions = styled(StructuredDataActions).withConfig({ displayName: "StructuredDataSaveActions", componentId: "sc-1h4vci9" }) `
+  margin-left: auto;
+`;
 /**
  * Область представления. Прокручивается внутри себя, чтобы длинная таблица не растягивала
  * контейнер за пределы отведённой ему ячейки; `min-height: 0` разрешает flex-ребёнку сжиматься.
@@ -11065,7 +11242,7 @@ const StructuredDataActions = styled(uilibGl.Flex).withConfig({ displayName: "St
  * Собственный бокс таблицы (`options.width`/`height` представления) живёт внутри и на эту
  * прокрутку не влияет: он ограничивает саму таблицу, а не отведённое контейнером место.
  */
-const StructuredDataView = styled(uilibGl.Flex).withConfig({ displayName: "StructuredDataView", componentId: "sc-1ws3t0d" }) `
+const StructuredDataView = styled(uilibGl.Flex).withConfig({ displayName: "StructuredDataView", componentId: "sc-zyw8uj" }) `
   flex-direction: column;
   min-height: 0;
   overflow: auto;
@@ -11399,7 +11576,8 @@ const useStructuredDataSchema = (type, elementConfig) => {
  * Оркестратор контейнера: собирает схему, черновик и запись в одно состояние экрана.
  *
  * Правку открывает `options.editMode`: не задан или `false` — таблица целиком на чтение, без
- * редакторов ячеек, добавления, удаления и кнопок сохранения.
+ * редакторов ячеек, добавления, удаления и кнопок сохранения. Состав строк закрывается отдельно:
+ * с `editOnly` у представления правка ячеек остаётся, а добавление и удаление уходят.
  *
  * Вид источника на права правки не влияет — от него зависит только адресат «Сохранить». Слой
  * принимает запись через features-API, источник без `layerName` (EQL, python-скрипт, внешний
@@ -11433,6 +11611,10 @@ const useStructuredData = (type, elementConfig) => {
     const loading = hasDataSource && (!dataSource || dataSource.features === undefined);
     const hasError = hasDataSource && dataSource?.features === null;
     const canEdit = !!editMode;
+    // `editOnly` объявлен у представления, а кнопку добавления рисует контейнер — поэтому опцию
+    // разбирает он один и раздаёт готовые права: кнопке — сюда, колонке удаления — в контекст.
+    const editOnly = React.useMemo(() => !!elementConfig?.children?.find(({ id }) => id === STRUCTURED_DATA_VIEW_SLOT)?.options?.editOnly, [elementConfig?.children]);
+    const canChangeRows = canEdit && !editOnly;
     const onSave = React.useCallback(async () => {
         const savedRows = await save(rows);
         if (savedRows) {
@@ -11455,9 +11637,10 @@ const useStructuredData = (type, elementConfig) => {
         rows: visibleRows,
         loading,
         canEdit,
+        canDelete: canChangeRows,
         onCellChange: changeCell,
         onRowDelete,
-    }), [canEdit, changeCell, loading, onRowDelete, schema, visibleRows]);
+    }), [canChangeRows, canEdit, changeCell, loading, onRowDelete, schema, visibleRows]);
     return {
         contextValue,
         dirty,
@@ -11465,6 +11648,7 @@ const useStructuredData = (type, elementConfig) => {
         loading,
         hasError,
         canEdit,
+        canAdd: canChangeRows,
         isDeleteConfirmOpen: !!deletingKey,
         isDeletingSourceRow,
         onAddRow: addRow,
@@ -11485,11 +11669,11 @@ const useStructuredData = (type, elementConfig) => {
 const StructuredDataContainer = React.memo(({ type, elementConfig, isVisible, renderElement }) => {
     const { t } = useGlobalContext();
     const { root, body } = useContainerRoot({ elementConfig });
-    const { contextValue, dirty, saving, hasError, canEdit, isDeleteConfirmOpen, isDeletingSourceRow, onAddRow, onCancel, onSave, onDeleteConfirm, onDeleteCancel, } = useStructuredData(type, elementConfig);
+    const { contextValue, dirty, saving, hasError, canEdit, canAdd, isDeleteConfirmOpen, isDeletingSourceRow, onAddRow, onCancel, onSave, onDeleteConfirm, onDeleteCancel, } = useStructuredData(type, elementConfig);
     if (hasError) {
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig?.templateName });
     }
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(StructuredDataView, { children: jsxRuntime.jsx(StructuredDataContext.Provider, { value: contextValue, children: renderElement({ id: STRUCTURED_DATA_VIEW_SLOT }) }) }), canEdit && (jsxRuntime.jsxs(StructuredDataToolbar, { children: [jsxRuntime.jsx(StructuredDataActions, { children: jsxRuntime.jsx(AddButtonRow, { kind: "feature_add", tabIndex: 0, disabled: saving, onClick: onAddRow, children: t("actions.add", { ns: "common", defaultValue: "Добавить" }) }) }), dirty && (jsxRuntime.jsxs(StructuredDataActions, { children: [jsxRuntime.jsx(uilibGl.IconButton, { error: true, kind: "close", tabIndex: 0, disabled: saving, title: t("actions.cancel", { ns: "common", defaultValue: "Отменить" }), onClick: onCancel }), jsxRuntime.jsx(uilibGl.IconButton, { primary: true, kind: "success", tabIndex: 0, disabled: saving, title: t("actions.save", { ns: "common", defaultValue: "Сохранить" }), onClick: onSave })] }))] }))] })), jsxRuntime.jsx(DeleteRowDialog, { isOpen: isDeleteConfirmOpen, isSourceRow: isDeletingSourceRow, onConfirm: onDeleteConfirm, onCancel: onDeleteCancel })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(StructuredDataView, { children: jsxRuntime.jsx(StructuredDataContext.Provider, { value: contextValue, children: renderElement({ id: STRUCTURED_DATA_VIEW_SLOT }) }) }), canEdit && (canAdd || dirty) && (jsxRuntime.jsxs(StructuredDataToolbar, { children: [canAdd && (jsxRuntime.jsx(StructuredDataActions, { children: jsxRuntime.jsx(AddButtonRow, { kind: "feature_add", tabIndex: 0, disabled: saving, onClick: onAddRow, children: t("actions.add", { ns: "common", defaultValue: "Добавить" }) }) })), dirty && (jsxRuntime.jsxs(StructuredDataSaveActions, { children: [jsxRuntime.jsx(uilibGl.IconButton, { error: true, kind: "close", tabIndex: 0, disabled: saving, title: t("actions.cancel", { ns: "common", defaultValue: "Отменить" }), onClick: onCancel }), jsxRuntime.jsx(uilibGl.IconButton, { primary: true, kind: "success", tabIndex: 0, disabled: saving, title: t("actions.save", { ns: "common", defaultValue: "Сохранить" }), onClick: onSave })] }))] }))] })), jsxRuntime.jsx(DeleteRowDialog, { isOpen: isDeleteConfirmOpen, isSourceRow: isDeletingSourceRow, onConfirm: onDeleteConfirm, onCancel: onDeleteCancel })] }));
 });
 
 const TabAnchor = styled.div.withConfig({ displayName: "TabAnchor", componentId: "sc-emqf31" }) `
@@ -11568,13 +11752,19 @@ const SwiperContainer = styled.div.withConfig({ displayName: "SwiperContainer",
   .swiper-wrapper {
     display: flex;
   }
+
+  ${bgImageHostMixin};
 `;
 
-const TabsContainer = React.memo(({ elementConfig, type }) => {
+const TabsContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { palette } = styled.useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
-    const { id, options, style, children: tabs } = elementConfig || {};
+    const { id, options, style, children } = elementConfig || {};
     const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12, wordBreak } = options || {};
+    // Дети таба — перечисляемые сущности, каждый ребёнок становится вкладкой. Слот фона к ним не
+    // относится: без фильтра он превратился бы в лишнюю пустую вкладку и занял `tabs[0]`.
+    const tabs = React.useMemo(() => (children ?? []).filter(({ id: childId }) => childId !== BG_IMAGE_SLOT_ID), [children]);
+    const bgHost = useBgImageHost(elementConfig);
     const renderIcon = React.useCallback((icon, active) => {
         if (!icon)
             return null;
@@ -11591,7 +11781,7 @@ const TabsContainer = React.memo(({ elementConfig, type }) => {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsxRuntime.jsx(SwiperContainer, { id: id, style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id: tabId, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${tabId}`, active: selectedTabId === tabId, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(tabId), children: [renderIcon(tabOptions?.icon, selectedTabId === tabId), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: tabId })] }, tabId))) }) }));
+    return (jsxRuntime.jsxs(SwiperContainer, { id: id, style: style, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id: tabId, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${tabId}`, active: selectedTabId === tabId, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(tabId), children: [renderIcon(tabOptions?.icon, selectedTabId === tabId), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: tabId })] }, tabId))) })] }));
 });
 
 const SvgContainerColorMixin = styled.css `
@@ -11721,6 +11911,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const { id, style, options } = elementConfig || {};
     const { simple, downloadById, align } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
+    const bgHost = useBgImageHost(elementConfig);
     const { onExport } = useExportPdf(downloadById);
     const onClick = React.useCallback(() => {
         if (!expandable)
@@ -11736,13 +11927,14 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const renderVisibility = React.useMemo(() => isLayers && (jsxRuntime.jsx(uilibGl.FlexSpan, { mr: "-1rem", children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = React.useMemo(() => !!containerId &&
         expandable && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsxRuntime.jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, "$align": align, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsxRuntime.jsxs(Container, { id: id, style: style, isTitle: isVisible, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerTitle, { simple: simple, "$align": align, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] })] }));
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { width, height, overflow } = elementConfig?.options || {};
     const templateName = elementConfig?.templateName;
-    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({ style, width, height, overflow, defaultWidth: FILL_SIZE }), children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName]);
+    const bgHost = useBgImageHost(elementConfig);
+    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({ style, width, height, overflow, defaultWidth: FILL_SIZE }), ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: render }), jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName, bgHost, elementConfig]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -11778,7 +11970,7 @@ const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const { root, body } = useContainerRoot({ elementConfig });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(UploadContainerWrapper, { ...body, children: renderElement({ id: "uploader", wrap: false }) }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(UploadContainerWrapper, { ...body, children: renderElement({ id: "uploader", wrap: false }) }))] }));
 });
 
 const ExpandableTitle = React.memo(({ elementConfig, type, renderElement }) => {
@@ -11822,7 +12014,7 @@ const GridGroupView = React.memo(({ elementConfig, type, renderElement }) => {
         elementConfig,
         defaults: autoHeight ? GRID_AUTO_FILL_DEFAULTS : GRID_FILL_DEFAULTS,
     });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(GridTracks, { node: elementConfig, axis: "row", body: body, gap: gap, renderElement: renderElement }))] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(GridTracks, { node: elementConfig, axis: "row", body: body, gap: gap, renderElement: renderElement }))] }));
 });
 
 /** На сколько частей делит `split`. */
@@ -12395,12 +12587,13 @@ const ContainersGroupContainer = React.memo(props => {
     return jsxRuntime.jsx(FlowGroup, { ...props });
 });
 
-const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
+const ExportPdfContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { t } = useGlobalContext();
     const { loading, onExport } = useExportPdf(getRootElementId(type));
     const { id, style, options } = elementConfig || {};
     const { icon, title } = options || {};
-    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, style: style, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) })] }));
 });
 
 const StatusBadge = styled(uilibGl.Chip).withConfig({ displayName: "StatusBadge", componentId: "sc-1xmfl10" }) `
@@ -12660,12 +12853,12 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dataSources, ewktGeometry, layerInfo, projectDataSources, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(TaskContainerWrapper, { ...body, justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(TaskContainerWrapper, { ...body, justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
     const { root, body } = useContainerRoot({ elementConfig });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
 };
 
 const getControlTemplateName = (type) => {
@@ -12686,6 +12879,8 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
     const { config, attributes, layerInfo, expandedContainers } = useWidgetContext(type);
     const { filteredAttributes, filteredControls } = useEditGroupAttributes({ elementConfig, type });
     const getRenderContainerItem = useRenderContainerItem(type, renderElement);
+    const bgHost = useBgImageHost(elementConfig);
+    const needsHost = !!bgHost.$hasBgImage || !!bgHost.$innerPadding;
     const renderContainer = React.useCallback((attributeName) => {
         const control = filteredControls?.find(({ targetAttributeName }) => targetAttributeName === attributeName);
         const itemAttribute = attributes.find(item => item.attributeName === attributeName);
@@ -12694,7 +12889,11 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
             : getTemplateNameFromAttribute(itemAttribute);
         const itemConfig = {
             ...elementConfig,
-            children: elementConfig.children.map(child => ({
+            // Слот фона принадлежит самой группе и в клон поля не уходит: иначе одна и та же
+            // картинка легла бы фоном под КАЖДОЕ поле группы.
+            children: elementConfig.children
+                .filter(({ id: childId }) => childId !== BG_IMAGE_SLOT_ID)
+                .map(child => ({
                 ...child,
                 attributeName,
             })),
@@ -12717,10 +12916,15 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
         layerInfo,
         expandedContainers,
     ]);
-    if (!filteredControls?.length) {
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredAttributes.map(({ attributeName }) => renderContainer(attributeName)) }));
-    }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredControls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)) }));
+    const fields = React.useMemo(() => !filteredControls?.length
+        ? filteredAttributes.map(({ attributeName }) => renderContainer(attributeName))
+        : filteredControls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)), [filteredControls, filteredAttributes, renderContainer]);
+    // Как и `DefaultAttributes`, группа намеренно отдаёт НЕСКОЛЬКО корней — по одному на поле.
+    // Общая обёртка появляется только под фон или `innerPadding`: без неё им не от чего
+    // отсчитывать бокс.
+    if (!needsHost)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields });
+    return (jsxRuntime.jsxs(Container, { isColumn: true, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), fields] }));
 });
 
 const useEditControl = (type, elementConfig) => {
@@ -12766,7 +12970,8 @@ const EditBooleanContainer = ({ type, elementConfig, renderElement, }) => {
     const { t } = useGlobalContext();
     const { value, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Switch, { label: value
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Switch, { label: value
                         ? t("on", { defaultValue: "Вкл" })
                         : t("off", { defaultValue: "Выкл" }), checked: !!value, onChange: () => onChange(!value) }) })] }));
 };
@@ -12780,20 +12985,23 @@ const EditStringContainer = ({ type, elementConfig, renderElement, }) => {
         onControlChange(String(lastSelected?.value ?? ""));
         setValue(lastSelected?.text ?? "");
     }, [onControlChange, setValue]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: control?.relatedDataSource ? (jsxRuntime.jsx(uilibGl.AutoComplete, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: value, options: options, width: "100%", onChange: onChange, onSelect: onSelect })) : (jsxRuntime.jsx(uilibGl.Input, { value: controlValue, width: "100%", onChange: (e) => onControlChange(e.target.value) })) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: control?.relatedDataSource ? (jsxRuntime.jsx(uilibGl.AutoComplete, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: value, options: options, width: "100%", onChange: onChange, onSelect: onSelect })) : (jsxRuntime.jsx(uilibGl.Input, { value: controlValue, width: "100%", onChange: (e) => onControlChange(e.target.value) })) })] }));
 };
 
 const EditNumberContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, control, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { column: true, children: [jsxRuntime.jsx(uilibGl.Input, { value: value?.toString(), width: "100%", onChange: (e) => onChange(e.target.value) }), jsxRuntime.jsx(uilibGl.Slider, { value: value, min: control?.minValue, max: control?.maxValue, step: control?.step, sliderWidth: "100%", primary: true, onChange: onChange })] })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { column: true, children: [jsxRuntime.jsx(uilibGl.Input, { value: value?.toString(), width: "100%", onChange: (e) => onChange(e.target.value) }), jsxRuntime.jsx(uilibGl.Slider, { value: value, min: control?.minValue, max: control?.maxValue, step: control?.step, sliderWidth: "100%", primary: true, onChange: onChange })] })] }));
 };
 
 const EditDropdownContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, control, items, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
     const optionsList = React.useMemo(() => items.map(item => ({ text: item, value: item })), [items]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, label: control?.label, placeholder: control?.placeholder, options: optionsList, value: value, width: `${control?.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, label: control?.label, placeholder: control?.placeholder, options: optionsList, value: value, width: `${control?.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
 };
 
 const CheckboxWrapper = styled(ContainerValue).withConfig({ displayName: "CheckboxWrapper", componentId: "sc-169umb6" }) `
@@ -12818,13 +13026,15 @@ const ChipsWrapper = styled(ContainerValue).withConfig({ displayName: "ChipsWrap
 const EditChipsContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, items, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ChipsWrapper, { children: items.map(item => (jsxRuntime.jsx(uilibGl.Chip, { text: item, primary: value === item, onClick: () => onChange(item) }, item))) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ChipsWrapper, { children: items.map(item => (jsxRuntime.jsx(uilibGl.Chip, { text: item, primary: value === item, onClick: () => onChange(item) }, item))) })] }));
 };
 
 const EditCheckboxContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, items, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(CheckboxWrapper, { children: items.map(item => (jsxRuntime.jsx(uilibGl.Checkbox, { label: item, checked: item === value, onChange: () => onChange(item) }, item))) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(CheckboxWrapper, { children: items.map(item => (jsxRuntime.jsx(uilibGl.Checkbox, { label: item, checked: item === value, onChange: () => onChange(item) }, item))) })] }));
 };
 
 const EditDateContainer = ({ type, elementConfig, renderElement, }) => {
@@ -12834,7 +13044,8 @@ const EditDateContainer = ({ type, elementConfig, renderElement, }) => {
     const { withTime } = options || {};
     const dateValue = React.useMemo(() => (value ? new Date(value) : undefined), [value]);
     const handleChange = React.useCallback((date) => onChange(date.toISOString()), [onChange]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.DatePicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime ?? false, withHeader: true, width: "100%", onChange: handleChange }) })] }));
+    const bgHost = useBgImageHost(elementConfig);
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.DatePicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime ?? false, withHeader: true, width: "100%", onChange: handleChange }) })] }));
 };
 
 const AddButton = ({ multiple = true, accept, onSelectFiles, onSelectFromCatalog, onSelectFromLink, }) => {
@@ -12978,6 +13189,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
     const [uploading, setUploading] = React.useState(false);
     const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
     const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
+    const bgHost = useBgImageHost(elementConfig);
     const persist = React.useCallback((next) => onChange(next), [onChange]);
     const handlePreview = React.useCallback((link) => {
         const idx = items.findIndex(item => item.link === link);
@@ -13035,7 +13247,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
             setUploading(false);
         }
     }, [api, items, parentResourceId, persist]);
-    return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview }, previewIndex))] }));
+    return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview }, previewIndex))] }));
 });
 
 // `ProgressContainer` и `RoundedBackgroundContainer` исторически принимают `InnerContainerProps`
@@ -13473,88 +13685,222 @@ const AlertIconContainer = styled(uilibGl.Flex).withConfig({ displayName: "Alert
   width: 2rem;
   height: 2rem;
 
-  ${uilibGl.Icon} {
-    :after {
-      color: ${({ theme: { palette } }) => palette.error};
+  ${uilibGl.Icon} {
+    :after {
+      color: ${({ theme: { palette } }) => palette.error};
+    }
+  }
+`;
+
+var img$3 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3cpath d='M20.248 9.67787C18.5318 8.04035 15.9473 7.54977 13.7024 8.43543C11.4576 9.32109 9.99566 11.4081 10 13.721C10 18.2894 16 24 16 24C16 24 22 18.2894 22 13.721C22.0028 12.2054 21.3726 10.7509 20.248 9.67787Z' fill='url(%23paint0_linear_6459_10338)'/%3e %3ccircle cx='16' cy='14' r='2' fill='white'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10338' x1='10' y1='8' x2='25.36' y2='19.52' gradientUnits='userSpaceOnUse'%3e %3cstop stop-color='%230084D6'/%3e %3cstop offset='0.489583' stop-color='%230084D6'/%3e %3cstop offset='0.489683' stop-color='%2305A9FF'/%3e %3cstop offset='0.921875' stop-color='%2305A9FF'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
+
+var img$2 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3cpath d='M4 17.9574H10.1538L13.5385 12L18.4615 20L22 13.8723H28' stroke='url(%23paint0_linear_6459_10369)' stroke-width='2' stroke-linejoin='round'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10369' x1='4' y1='9.54167' x2='28.7229' y2='20.1484' gradientUnits='userSpaceOnUse'%3e %3cstop offset='0.525942' stop-color='%2306AAFF'/%3e %3cstop offset='0.526042' stop-color='%230184D7'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
+
+var img$1 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3crect x='8' y='8' width='16' height='16' rx='2' fill='url(%23paint0_linear_6459_10399)'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10399' x1='8' y1='8' x2='24' y2='24' gradientUnits='userSpaceOnUse'%3e %3cstop stop-color='%230084D6'/%3e %3cstop offset='0.489583' stop-color='%230084D6'/%3e %3cstop offset='0.489683' stop-color='%2305A9FF'/%3e %3cstop offset='0.921875' stop-color='%2305A9FF'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
+
+var img = "data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:%23AEC46F%3b%7d %3c/style%3e %3cg%3e %3cpath class='st0' d='M19%2c4H5C4.4%2c4%2c4%2c4.4%2c4%2c5v14c0%2c0.6%2c0.4%2c1%2c1%2c1h14c0.6%2c0%2c1-0.4%2c1-1V5C20%2c4.4%2c19.6%2c4%2c19%2c4z M6%2c7.5h2.8l-0.7%2c2H6 V7.5z M6%2c13h5v5h-0.4c-0.3-2.4-2.2-4.3-4.6-4.6V13z M18%2c11h-4.3L18%2c6.7V11z M13%2c10.3V6h4.3L13%2c10.3z M17.9%2c13c-0.5%2c1-1.6%2c1.7-3%2c1.7 H13V13H17.9z M13%2c15.7h1.7c0.1%2c0.9%2c0.5%2c1.7%2c1%2c2.3H13V15.7z M15.7%2c15.6c0.9-0.2%2c1.7-0.6%2c2.3-1.2V18h-0.7 C16.5%2c17.6%2c15.9%2c16.7%2c15.7%2c15.6z M11%2c6v5H6v-0.5h2.5c0.2%2c0%2c0.4-0.1%2c0.5-0.3l1-3c0-0.2%2c0-0.4-0.1-0.5C9.8%2c6.6%2c9.7%2c6.5%2c9.5%2c6.5H6V6 H11z M6%2c14.4c1.8%2c0.3%2c3.3%2c1.8%2c3.6%2c3.6H6V14.4z'/%3e %3c/g%3e%3c/svg%3e";
+
+const LayerIcon = ({ layerInfo, error, innerRef }) => {
+    const geometryType = layerInfo?.configuration?.geometryType;
+    const renderSymbol = React.useMemo(() => {
+        if (layerInfo?.configuration?.layerType === api.LayerServiceType.RemoteTileLayerService) {
+            return jsxRuntime.jsx("img", { src: img, alt: "" });
+        }
+        if (!geometryType || error) {
+            return (jsxRuntime.jsx(AlertIconContainer, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "warning" }) }));
+        }
+        switch (geometryType) {
+            case api.OgcGeometryType.Point:
+            case api.OgcGeometryType.MultiPoint:
+                return jsxRuntime.jsx("img", { src: img$3, alt: "" });
+            case api.OgcGeometryType.Polygon:
+            case api.OgcGeometryType.MultiPolygon:
+                return jsxRuntime.jsx("img", { src: img$1, alt: "" });
+            case api.OgcGeometryType.LineString:
+            case api.OgcGeometryType.MultiLineString:
+                return jsxRuntime.jsx("img", { src: img$2, alt: "" });
+            default:
+                return jsxRuntime.jsx("img", { src: img$3, alt: "" });
+        }
+    }, [error, geometryType, layerInfo?.configuration?.layerType]);
+    return jsxRuntime.jsx(LayerIconContainer, { ref: innerRef, children: renderSymbol });
+};
+
+const LayerIconClickable = styled.div.withConfig({ displayName: "LayerIconClickable", componentId: "sc-1o3bms0" }) `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const NoFeatureIcon = styled.div.withConfig({ displayName: "NoFeatureIcon", componentId: "sc-sxo6af" }) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  margin-right: 1rem;
+  margin-left: 0.25rem;
+
+  ${uilibGl.Icon}::after {
+    font-size: 1.5rem;
+    color: ${({ theme: { palette } }) => palette.iconDisabled};
+  }
+`;
+
+const HeaderLayerIcon = ({ noFeature }) => {
+    const { t } = useGlobalContext();
+    const { layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const zoomToFeatures = useZoomToFeatures();
+    const getMaxZoomTo = useMaxZoomTo();
+    const [optionsMaxZoomTo, layerMaxZoomTo] = React.useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
+    const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    if (noFeature) {
+        return (jsxRuntime.jsx(NoFeatureIcon, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "no_geom" }) }));
+    }
+    return (jsxRuntime.jsx(LayerIconClickable, { onClick: handleIconClick, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIcon, { innerRef: ref, layerInfo: layerInfo })) }) }));
+};
+
+const FeatureCardDefaultHeader = ({ noFeature }) => {
+    const { themeName: pageThemeName } = useGlobalContext();
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const { header } = config || {};
+    const { options } = header || {};
+    const { themeName, withPadding, column, height, overlay } = options || {};
+    return (jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName ?? pageThemeName), children: jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, "$noFeature": noFeature, children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, "$noFeature": noFeature, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, { noFeature: noFeature }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+};
+
+const HeaderWrapperMixin = styled.css `
+  ${Header} {
+    min-height: 5.25rem;
+  }
+
+  ${HeaderContainer} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  ${FeatureControls} {
+    max-width: calc(100% - 2rem);
+    width: calc(100% - 2rem);
+    margin-top: -0.5rem;
+    padding-top: 1rem;
+    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
+  }
+
+  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin};
+`;
+const HeaderIcon = styled(uilibGl.Flex).withConfig({ displayName: "HeaderIcon", componentId: "sc-1y7xqr9" }) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  align-items: center;
+  justify-content: center;
+  width: 7.625rem;
+  height: 100%;
+
+  span[kind] {
+    width: 4rem;
+    
+    :after {
+      font-size: 4rem;
+      color: rgba(255, 255, 255, 0.36);
+    }
+  }
+
+  span[kind]:after,
+  path,
+  line,
+  circle {
+    fill: rgba(255, 255, 255, 0.36);
+  }
+
+  && > * {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+`;
+const BigIconHeaderMixin = styled.css `
+  ${HeaderIcon} {
+    min-width: 14rem;
+    right: -3rem;
+
+    span[kind]:after {
+      font-size: 14rem;
+    }
+  }
+`;
+const WithPaddingHeaderMixin = styled.css `
+  ${Header} {
+    width: 100%;
+    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
+  }
+`;
+const BottomBlurHeaderMixin = styled.css `
+  ${Header} {
+    margin-bottom: 0;
+
+    &::before {
+      -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+      mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+    }
+  }
+
+  ${ContainerBackgroundLayer} {
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+  }
+
+  ${HeaderFrontView} {
+    z-index: 100;
+  }
+`;
+const BackgroundHeaderWrapper = styled.div.withConfig({ displayName: "BackgroundHeaderWrapper", componentId: "sc-10iuilq" }) `
+  ${Header} {
+    position: relative;
+    width: calc(100% + 1rem);
+    height: ${({ $height }) => $height ? `${$height}px` : "auto"};
+    margin: -1rem -1rem 1rem -1rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 100;
+      pointer-events: none;
+      background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
     }
   }
-`;
-
-var img$3 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3cpath d='M20.248 9.67787C18.5318 8.04035 15.9473 7.54977 13.7024 8.43543C11.4576 9.32109 9.99566 11.4081 10 13.721C10 18.2894 16 24 16 24C16 24 22 18.2894 22 13.721C22.0028 12.2054 21.3726 10.7509 20.248 9.67787Z' fill='url(%23paint0_linear_6459_10338)'/%3e %3ccircle cx='16' cy='14' r='2' fill='white'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10338' x1='10' y1='8' x2='25.36' y2='19.52' gradientUnits='userSpaceOnUse'%3e %3cstop stop-color='%230084D6'/%3e %3cstop offset='0.489583' stop-color='%230084D6'/%3e %3cstop offset='0.489683' stop-color='%2305A9FF'/%3e %3cstop offset='0.921875' stop-color='%2305A9FF'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
-
-var img$2 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3cpath d='M4 17.9574H10.1538L13.5385 12L18.4615 20L22 13.8723H28' stroke='url(%23paint0_linear_6459_10369)' stroke-width='2' stroke-linejoin='round'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10369' x1='4' y1='9.54167' x2='28.7229' y2='20.1484' gradientUnits='userSpaceOnUse'%3e %3cstop offset='0.525942' stop-color='%2306AAFF'/%3e %3cstop offset='0.526042' stop-color='%230184D7'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
-
-var img$1 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3crect x='8' y='8' width='16' height='16' rx='2' fill='url(%23paint0_linear_6459_10399)'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10399' x1='8' y1='8' x2='24' y2='24' gradientUnits='userSpaceOnUse'%3e %3cstop stop-color='%230084D6'/%3e %3cstop offset='0.489583' stop-color='%230084D6'/%3e %3cstop offset='0.489683' stop-color='%2305A9FF'/%3e %3cstop offset='0.921875' stop-color='%2305A9FF'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
-
-var img = "data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:%23AEC46F%3b%7d %3c/style%3e %3cg%3e %3cpath class='st0' d='M19%2c4H5C4.4%2c4%2c4%2c4.4%2c4%2c5v14c0%2c0.6%2c0.4%2c1%2c1%2c1h14c0.6%2c0%2c1-0.4%2c1-1V5C20%2c4.4%2c19.6%2c4%2c19%2c4z M6%2c7.5h2.8l-0.7%2c2H6 V7.5z M6%2c13h5v5h-0.4c-0.3-2.4-2.2-4.3-4.6-4.6V13z M18%2c11h-4.3L18%2c6.7V11z M13%2c10.3V6h4.3L13%2c10.3z M17.9%2c13c-0.5%2c1-1.6%2c1.7-3%2c1.7 H13V13H17.9z M13%2c15.7h1.7c0.1%2c0.9%2c0.5%2c1.7%2c1%2c2.3H13V15.7z M15.7%2c15.6c0.9-0.2%2c1.7-0.6%2c2.3-1.2V18h-0.7 C16.5%2c17.6%2c15.9%2c16.7%2c15.7%2c15.6z M11%2c6v5H6v-0.5h2.5c0.2%2c0%2c0.4-0.1%2c0.5-0.3l1-3c0-0.2%2c0-0.4-0.1-0.5C9.8%2c6.6%2c9.7%2c6.5%2c9.5%2c6.5H6V6 H11z M6%2c14.4c1.8%2c0.3%2c3.3%2c1.8%2c3.6%2c3.6H6V14.4z'/%3e %3c/g%3e%3c/svg%3e";
-
-const LayerIcon = ({ layerInfo, error, innerRef }) => {
-    const geometryType = layerInfo?.configuration?.geometryType;
-    const renderSymbol = React.useMemo(() => {
-        if (layerInfo?.configuration?.layerType === api.LayerServiceType.RemoteTileLayerService) {
-            return jsxRuntime.jsx("img", { src: img, alt: "" });
-        }
-        if (!geometryType || error) {
-            return (jsxRuntime.jsx(AlertIconContainer, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "warning" }) }));
-        }
-        switch (geometryType) {
-            case api.OgcGeometryType.Point:
-            case api.OgcGeometryType.MultiPoint:
-                return jsxRuntime.jsx("img", { src: img$3, alt: "" });
-            case api.OgcGeometryType.Polygon:
-            case api.OgcGeometryType.MultiPolygon:
-                return jsxRuntime.jsx("img", { src: img$1, alt: "" });
-            case api.OgcGeometryType.LineString:
-            case api.OgcGeometryType.MultiLineString:
-                return jsxRuntime.jsx("img", { src: img$2, alt: "" });
-            default:
-                return jsxRuntime.jsx("img", { src: img$3, alt: "" });
-        }
-    }, [error, geometryType, layerInfo?.configuration?.layerType]);
-    return jsxRuntime.jsx(LayerIconContainer, { ref: innerRef, children: renderSymbol });
-};
-
-const LayerIconClickable = styled.div.withConfig({ displayName: "LayerIconClickable", componentId: "sc-1o3bms0" }) `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
-const NoFeatureIcon = styled.div.withConfig({ displayName: "NoFeatureIcon", componentId: "sc-sxo6af" }) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  margin-top: 0.25rem;
-  margin-right: 1rem;
-  margin-left: 0.25rem;
 
-  ${uilibGl.Icon}::after {
-    font-size: 1.5rem;
-    color: ${({ theme: { palette } }) => palette.iconDisabled};
-  }
+  ${HeaderWrapperMixin};
+
+  ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
+
+  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
+  
+  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
 `;
 
-const HeaderLayerIcon = ({ noFeature }) => {
-    const { t } = useGlobalContext();
-    const { layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
-    const zoomToFeatures = useZoomToFeatures();
-    const getMaxZoomTo = useMaxZoomTo();
-    const [optionsMaxZoomTo, layerMaxZoomTo] = React.useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
-    const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
-    if (noFeature) {
-        return (jsxRuntime.jsx(NoFeatureIcon, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "no_geom" }) }));
-    }
-    return (jsxRuntime.jsx(LayerIconClickable, { onClick: handleIconClick, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIcon, { innerRef: ref, layerInfo: layerInfo })) }) }));
-};
-
-const FeatureCardDefaultHeader = ({ noFeature }) => {
+const FeatureCardBackgroundHeader = () => {
     const { themeName: pageThemeName } = useGlobalContext();
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { themeName, withPadding, column, height, overlay } = options || {};
-    return (jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName ?? pageThemeName), children: jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, "$noFeature": noFeature, children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, "$noFeature": noFeature, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, { noFeature: noFeature }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+    const { fontColor, bgColor, height, overlay, bigIcon, withPadding, bottomBlur, themeName, column } = options || {};
+    const renderElement = useHeaderRender(header);
+    return (jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName ?? pageThemeName), children: jsxRuntime.jsx(BackgroundHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+                                            id: "title",
+                                            wrap: false,
+                                        }), description: renderElement({
+                                            id: "description",
+                                            wrap: false,
+                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ContainerBackground, { elementConfig: header, renderElement: renderElement }), jsxRuntime.jsx(HeaderIcon, { children: renderElement({
+                            id: "icon",
+                            wrap: false,
+                        }) })] }) }) }));
 };
 
 const ImageContainerButton = styled(uilibGl.FlatButton).withConfig({ displayName: "ImageContainerButton", componentId: "sc-nq6mg4" }) `
@@ -14017,13 +14363,17 @@ const ElementIcon = React.memo(({ type, elementConfig, ...rest }) => {
 const ElementImg = styled.img.withConfig({ displayName: "ElementImg", componentId: "sc-7ul8bx" }) `
   max-width: 100%;
 
-  /* Картинка заполняет отведённый ей бокс: масштаб по меньшей стороне, излишек обрезается. */
+  /* Картинка заполняет отведённый ей бокс: масштаб по меньшей стороне, излишек обрезается.
+     && — чтобы авторский options.fit перебивал дефолтный cover слоя ContainerBackgroundLayer:
+     тот задаёт его селектором-потомком (.layer img) и иначе выигрывал бы по специфичности. */
   ${({ $fit }) => !!$fit &&
     styled.css `
-      width: 100%;
-      height: 100%;
-      object-position: center;
-      object-fit: ${$fit};
+      && {
+        width: 100%;
+        height: 100%;
+        object-position: center;
+        object-fit: ${$fit};
+      }
     `}
 
   ${sizeCssMixin};
@@ -14953,7 +15303,7 @@ const ElementTable = React.memo(({ elementConfig }) => {
     return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description }) => {
                                 const sorted = sort?.attributeName === attributeName;
                                 return (jsxRuntime.jsx(TableHeadCell, { title: description || alias, "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }) }, attributeName));
-                            }), context.canEdit && jsxRuntime.jsx(TableHeadCell, {})] }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canEdit && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+                            }), context.canDelete && jsxRuntime.jsx(TableHeadCell, {})] }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map(attribute => (jsxRuntime.jsx(TableCellWrapper, { children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(uilibGl.Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `
@@ -15021,21 +15371,7 @@ const SlideshowHeaderWrapper = styled.div.withConfig({ displayName: "SlideshowHe
 
   ${({ fontColor }) => !!fontColor && HeaderFontColorMixin};
 `;
-const ImageContainerBg = styled.div.withConfig({ displayName: "ImageContainerBg", componentId: "sc-1yxa8u0" }) `
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-position: center;
-    object-fit: cover;
-  }
-`;
-const HeaderSlideshow = styled.div.withConfig({ displayName: "HeaderSlideshow", componentId: "sc-fqw4k7" }) `
+const HeaderSlideshow = styled.div.withConfig({ displayName: "HeaderSlideshow", componentId: "sc-1yw2skw" }) `
   position: absolute;
   top: 0;
   bottom: ${({ height }) => (height ? `${height}px` : 0)};
@@ -15056,143 +15392,6 @@ const HeaderSlideshow = styled.div.withConfig({ displayName: "HeaderSlideshow",
   }
 `;
 
-const HeaderWrapperMixin = styled.css `
-  ${Header} {
-    min-height: 5.25rem;
-  }
-
-  ${HeaderContainer} {
-    max-width: 100%;
-    width: 100%;
-  }
-
-  ${FeatureControls} {
-    max-width: calc(100% - 2rem);
-    width: calc(100% - 2rem);
-    margin-top: -0.5rem;
-    padding-top: 1rem;
-    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
-  }
-
-  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin};
-`;
-const HeaderIcon = styled(uilibGl.Flex).withConfig({ displayName: "HeaderIcon", componentId: "sc-1y7xqr9" }) `
-  position: absolute;
-  top: 0;
-  right: 0;
-  align-items: center;
-  justify-content: center;
-  width: 7.625rem;
-  height: 100%;
-
-  span[kind] {
-    width: 4rem;
-    
-    :after {
-      font-size: 4rem;
-      color: rgba(255, 255, 255, 0.36);
-    }
-  }
-
-  span[kind]:after,
-  path,
-  line,
-  circle {
-    fill: rgba(255, 255, 255, 0.36);
-  }
-
-  && > * {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-`;
-const BigIconHeaderMixin = styled.css `
-  ${HeaderIcon} {
-    min-width: 14rem;
-    right: -3rem;
-
-    span[kind]:after {
-      font-size: 14rem;
-    }
-  }
-`;
-const WithPaddingHeaderMixin = styled.css `
-  ${Header} {
-    width: 100%;
-    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
-  }
-`;
-const BottomBlurHeaderMixin = styled.css `
-  ${Header} {
-    margin-bottom: 0;
-
-    &::before {
-      -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
-      mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
-    }
-  }
-
-  ${ImageContainerBg} {
-    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
-    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
-  }
-
-  ${HeaderFrontView} {
-    z-index: 100;
-  }
-`;
-const BackgroundHeaderWrapper = styled.div.withConfig({ displayName: "BackgroundHeaderWrapper", componentId: "sc-10iuilq" }) `
-  ${Header} {
-    position: relative;
-    width: calc(100% + 1rem);
-    height: ${({ $height }) => $height ? `${$height}px` : "auto"};
-    margin: -1rem -1rem 1rem -1rem;
-    border-radius: 0.5rem;
-    background: transparent;
-    overflow: hidden;
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      z-index: 100;
-      pointer-events: none;
-      background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
-    }
-  }
-
-  ${HeaderWrapperMixin};
-
-  ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
-
-  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
-  
-  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
-`;
-
-const FeatureCardBackgroundHeader = () => {
-    const { themeName: pageThemeName } = useGlobalContext();
-    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
-    const { header } = config || {};
-    const { options } = header || {};
-    const { fontColor, bgColor, height, overlay, bigIcon, withPadding, bottomBlur, themeName, column } = options || {};
-    const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName ?? pageThemeName), children: jsxRuntime.jsx(BackgroundHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
-                                            id: "title",
-                                            wrap: false,
-                                        }), description: renderElement({
-                                            id: "description",
-                                            wrap: false,
-                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({
-                            id: "bgImage",
-                            wrap: false,
-                        }) }), jsxRuntime.jsx(HeaderIcon, { children: renderElement({
-                            id: "icon",
-                            wrap: false,
-                        }) })] }) }) }));
-};
-
 const FeatureCardSlideshowHeader = () => {
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
@@ -15205,10 +15404,7 @@ const FeatureCardSlideshowHeader = () => {
                                         }), description: renderElement({
                                             id: "description",
                                             wrap: false,
-                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({
-                            id: "bgImage",
-                            wrap: false,
-                        }) }), jsxRuntime.jsx(HeaderSlideshow, { height: height, children: renderElement({
+                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ContainerBackground, { elementConfig: header, renderElement: renderElement }), jsxRuntime.jsx(HeaderSlideshow, { height: height, children: renderElement({
                             id: "slideshow",
                             wrap: false,
                         }) })] }) }) }));
@@ -17152,6 +17348,14 @@ const getTotalFromRelatedFeatures = (data) => {
 
 const getRootElementId = (type = exports.WidgetType.Dashboard) => `${type}-root`;
 
+/**
+ * Есть ли у узла конфига слот фонового изображения.
+ *
+ * Слой фона рисуется ТОЛЬКО по этому признаку: без узла `bgImage` в конфиге пустой
+ * абсолютно позиционированный `div` в DOM не появляется вовсе.
+ */
+const hasContainerBgImage = (elementConfig) => !!elementConfig?.children?.some(({ id }) => id === BG_IMAGE_SLOT_ID);
+
 const pieChartTooltipFromAttributes = (t, data, attributes) => {
     const attribute = attributes?.find(({ name }) => name === data[0].name);
     const renderValue = attribute
@@ -17530,7 +17734,7 @@ const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }
 const ContainerChildren = React.memo(({ type, items, isColumn, isMain, renderElement }) => {
     const checkIfEmptyDataSource = useHideIfEmptyDataSource(type);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items
-            ?.filter(item => !TITLE_SLOT_IDS.includes(item.id))
+            ?.filter(item => !NON_TRACK_SLOT_IDS.includes(item.id))
             ?.map((item, index) => {
             const render = renderElement({
                 id: item.id,
@@ -18188,6 +18392,7 @@ exports.AttachmentContainer = AttachmentContainer;
 exports.AttributeGalleryContainer = AttributeGalleryContainer;
 exports.AttributeLabel = AttributeLabel;
 exports.BASE_CONTAINER_STYLE = BASE_CONTAINER_STYLE;
+exports.BG_IMAGE_SLOT_ID = BG_IMAGE_SLOT_ID;
 exports.CHART_TYPES = CHART_TYPES;
 exports.COMPACT_FRACTION_DIGITS = COMPACT_FRACTION_DIGITS;
 exports.CONFIG_PAGES_ID = CONFIG_PAGES_ID;
@@ -18201,6 +18406,7 @@ exports.ChartContainer = ChartContainer;
 exports.ChartLegend = ChartLegend;
 exports.ChartLoading = ChartLoading;
 exports.Container = Container;
+exports.ContainerBackground = ContainerBackground;
 exports.ContainerChildren = ContainerChildren;
 exports.ContainerLoading = ContainerLoading;
 exports.ContainerRoot = ContainerRoot;
@@ -18362,6 +18568,7 @@ exports.MIN_TRACK_RATIO = MIN_TRACK_RATIO;
 exports.Map = Map$1;
 exports.MapContext = MapContext;
 exports.MapProvider = MapProvider;
+exports.NON_TRACK_SLOT_IDS = NON_TRACK_SLOT_IDS;
 exports.NO_CELL_DRAG_SELECTOR = NO_CELL_DRAG_SELECTOR;
 exports.NO_CONTENT_VALUE = NO_CONTENT_VALUE;
 exports.NUMERIC_ATTRIBUTE_TYPES = NUMERIC_ATTRIBUTE_TYPES;
@@ -18519,6 +18726,7 @@ exports.getTrackSize = getTrackSize;
 exports.getTrackSizeKey = getTrackSizeKey;
 exports.getTrackSizes = getTrackSizes;
 exports.getWrapperSizeStyle = getWrapperSizeStyle;
+exports.hasContainerBgImage = hasContainerBgImage;
 exports.hexToRgba = hexToRgba;
 exports.isEmptyElementValue = isEmptyElementValue;
 exports.isEmptyValue = isEmptyValue;
@@ -18574,6 +18782,7 @@ exports.useAttachmentItems = useAttachmentItems;
 exports.useAttachmentPreviewImages = useAttachmentPreviewImages;
 exports.useAutoCompleteControl = useAutoCompleteControl;
 exports.useBeforeSave = useBeforeSave;
+exports.useBgImageHost = useBgImageHost;
 exports.useChartChange = useChartChange;
 exports.useChartData = useChartData;
 exports.useContainerAttributes = useContainerAttributes;