@evergis/react 3.1.13 → 3.1.15

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var uilibGl = require('@evergis/uilib-gl');
-var react = require('react');
+var React = require('react');
 var styled = require('styled-components');
 var charts = require('@evergis/charts');
 var api = require('@evergis/api');
@@ -19,7 +19,7 @@ var turf = require('@turf/turf');
 var MapGL = require('react-map-gl/mapbox');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
-var react$1 = require('swiper/react');
+var react = require('swiper/react');
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -3684,31 +3684,31 @@ const isLayerService = (value) => isObject(value) && "name" in value;
 
 const isNumeric = (number) => !isNaN(parseFloat(number)) && isFinite(number);
 
-const ConfigContext = react.createContext({});
-const ConfigProvider = react.memo(({ children, config }) => {
+const ConfigContext = React.createContext({});
+const ConfigProvider = React.memo(({ children, config }) => {
     return jsxRuntime.jsx(ConfigContext.Provider, { value: { config }, children: children });
 });
 
-const DashboardContext = react.createContext({});
-const DashboardProvider = react.memo(({ children, ...props }) => {
+const DashboardContext = React.createContext({});
+const DashboardProvider = React.memo(({ children, ...props }) => {
     return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
 });
 
-const FeatureCardContext = react.createContext(null);
-const FeatureCardProvider = react.memo(({ settings, children }) => jsxRuntime.jsx(FeatureCardContext.Provider, { value: settings, children: children }));
+const FeatureCardContext = React.createContext(null);
+const FeatureCardProvider = React.memo(({ settings, children }) => jsxRuntime.jsx(FeatureCardContext.Provider, { value: settings, children: children }));
 
-const GlobalContext = react.createContext({});
-const GlobalProvider = react.memo(({ children, ...props }) => {
+const GlobalContext = React.createContext({});
+const GlobalProvider = React.memo(({ children, ...props }) => {
     return jsxRuntime.jsx(GlobalContext.Provider, { value: props, children: children });
 });
 
-const MapContext = react.createContext({});
+const MapContext = React.createContext({});
 
 const MapProvider = ({ basemapItems, defaultBasemap, children }) => {
-    const map = react.useRef();
-    const draw = react.useRef();
-    const [loaded, setLoaded] = react.useState(false);
-    const [basemapName, setBasemapName] = react.useState(defaultBasemap);
+    const map = React.useRef();
+    const draw = React.useRef();
+    const [loaded, setLoaded] = React.useState(false);
+    const [basemapName, setBasemapName] = React.useState(defaultBasemap);
     return (jsxRuntime.jsx(MapContext.Provider, { value: {
             map,
             draw,
@@ -3727,12 +3727,12 @@ exports.BaseMapTheme = void 0;
     BaseMapTheme["Dark"] = "dark";
 })(exports.BaseMapTheme || (exports.BaseMapTheme = {}));
 
-const ServerNotificationsContext = react.createContext({});
+const ServerNotificationsContext = React.createContext({});
 
 const useServerNotifications = (url, initialized) => {
-    const hubConnection = react.useRef(null);
-    const [connection, setConnection] = react.useState(null);
-    react.useEffect(() => {
+    const hubConnection = React.useRef(null);
+    const [connection, setConnection] = React.useState(null);
+    React.useEffect(() => {
         if (!initialized) {
             return;
         }
@@ -3748,7 +3748,7 @@ const useServerNotifications = (url, initialized) => {
             .catch(err => console.info("Ошибка:", err))
             .finally(() => setConnection(hubConnection.current));
     }, [initialized]); // eslint-disable-line
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!connection || connection.state !== "Connected") {
             return;
         }
@@ -3762,7 +3762,7 @@ const useServerNotifications = (url, initialized) => {
 
 const ServerNotificationsProvider = ({ url, initialized, children }) => {
     const connection = useServerNotifications(url, initialized);
-    const addSubscription = react.useCallback(async (payload) => {
+    const addSubscription = React.useCallback(async (payload) => {
         if (!connection || connection.state !== "Connected" || !payload) {
             return;
         }
@@ -3776,7 +3776,7 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
             return Promise.resolve(null);
         }
     }, [connection]);
-    const updateSubscription = react.useCallback(async (id, payload) => {
+    const updateSubscription = React.useCallback(async (id, payload) => {
         if (!connection || connection.state !== "Connected" || !id || !payload) {
             return;
         }
@@ -3787,7 +3787,7 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
             console.info(`Ошибка обновления подписки ${id}:`, err);
         }
     }, [connection]);
-    const unsubscribeById = react.useCallback(async (id) => {
+    const unsubscribeById = React.useCallback(async (id) => {
         if (!connection || connection.state !== "Connected" || !id) {
             return;
         }
@@ -3802,8 +3802,8 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
 };
 
 const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
-    const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = react.useContext(DashboardContext) || {};
-    const { layerInfo, attributes, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = react.useContext(FeatureCardContext) || {};
+    const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
+    const { layerInfo, attributes, feature, closeFeatureCard, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
     return {
         projectInfo,
         layerInfos,
@@ -3813,6 +3813,9 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
         geometryFilter,
         layerInfo,
         attributes,
+        feature,
+        closeFeatureCard,
+        components: dashboardComponents,
         isLoading: type === exports.WidgetType.Dashboard ? projectLoading : featureLoading,
         pageIndex: type === exports.WidgetType.Dashboard ? projectPageIndex : featurePageIndex,
         filters: type === exports.WidgetType.Dashboard ? projectFilters : featureFilters,
@@ -3829,15 +3832,14 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
 };
 
 const useGlobalContext = () => {
-    const { t, language, themeName, api, ewktGeometry, LayerItemComponent } = react.useContext(GlobalContext) || {};
-    return react.useMemo(() => ({
+    const { t, language, themeName, api, ewktGeometry } = React.useContext(GlobalContext) || {};
+    return React.useMemo(() => ({
         t,
         language,
         themeName,
         api,
         ewktGeometry,
-        LayerItemComponent,
-    }), [language, t, api, ewktGeometry, themeName, LayerItemComponent]);
+    }), [language, t, api, ewktGeometry, themeName]);
 };
 
 const HEIGHT_OFFSET = 20;
@@ -3920,12 +3922,12 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
     const { t } = useGlobalContext();
     const { layerInfos } = useWidgetContext();
     const strokeColors = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y").map(({ axisColor }) => axisColor);
-    const ref = react.useRef({
+    const ref = React.useRef({
         path: null,
         area: null,
         points: [],
     });
-    const onChange = react.useCallback((range) => {
+    const onChange = React.useCallback((range) => {
         const { path, area, points } = ref.current;
         let filteredPoints = [...points];
         if (range) {
@@ -3937,7 +3939,7 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         path && path.attr("d", lineGenerator(filteredPoints));
         area && area.attr("d", areaGenerator(height)(filteredPoints));
     }, [height, width]);
-    const customize = react.useCallback(({ svg }) => {
+    const customize = React.useCallback(({ svg }) => {
         svg.style("overflow", "visible");
         svg
             .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} line,
@@ -4708,7 +4710,7 @@ const customStyles = [
 ];
 
 const useMapContext = () => {
-    return react.useContext(MapContext);
+    return React.useContext(MapContext);
 };
 
 const draw = new MapboxDraw({
@@ -4722,14 +4724,14 @@ const draw = new MapboxDraw({
 });
 const useMapDraw = (triggerDeps = []) => {
     const { map, draw: drawContext, loaded, basemapName } = useMapContext();
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!loaded || !map.current) {
             return;
         }
         drawContext.current = draw;
         map.current.addControl(drawContext.current);
     }, [loaded]); // eslint-disable-line
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (map.current && map.current.hasControl(drawContext.current)) {
             map.current.removeControl(drawContext.current);
             map.current.addControl(drawContext.current);
@@ -4739,7 +4741,7 @@ const useMapDraw = (triggerDeps = []) => {
 
 const useRedrawLayer = () => {
     const { map } = useMapContext();
-    return react.useCallback((layerName) => {
+    return React.useCallback((layerName) => {
         const layerTileSource = map.current.getSource(layerName);
         layerTileSource.setTiles(layerTileSource.tiles);
     }, [map]);
@@ -4802,7 +4804,7 @@ const convertSpToTurfFeature = (geometry) => {
 
 const useZoomToFeatures = () => {
     const { map } = useMapContext();
-    return react.useCallback((features, padding) => {
+    return React.useCallback((features, padding) => {
         if (!features) {
             return;
         }
@@ -4816,7 +4818,7 @@ const useZoomToFeatures = () => {
 
 const useZoomToPoint = () => {
     const { map } = useMapContext();
-    return react.useCallback((options, callback) => {
+    return React.useCallback((options, callback) => {
         if (map.current) {
             if (callback) {
                 map.current.once("moveend", () => {
@@ -4833,8 +4835,8 @@ const useZoomToPoint = () => {
 
 const useLayerParams = (layer) => {
     const { api } = useGlobalContext();
-    const [layerParams, setLayerParams] = react.useState({});
-    react.useEffect(() => {
+    const [layerParams, setLayerParams] = React.useState({});
+    React.useEffect(() => {
         if (layer?.type !== "QueryLayerService") {
             return;
         }
@@ -4847,27 +4849,27 @@ const useLayerParams = (layer) => {
 };
 
 const useServerNotificationsContext = () => {
-    return react.useContext(ServerNotificationsContext);
+    return React.useContext(ServerNotificationsContext);
 };
 
 const useDebouncedCallback = (interval) => {
-    return react.useMemo(() => debounce((cb) => {
+    return React.useMemo(() => debounce((cb) => {
         cb();
     }, interval), [interval]);
 };
 
 const useToggle = (initial) => {
-    const [state, setState] = react.useState(initial !== undefined ? initial : false);
-    const toggle = react.useCallback(() => setState(!state), [state]);
+    const [state, setState] = React.useState(initial !== undefined ? initial : false);
+    const toggle = React.useCallback(() => setState(!state), [state]);
     return [state, toggle, setState];
 };
 
 const DEBOUNCE_DELAY = 144;
 const useWindowResize = (callback, delay) => {
-    const debounceCallback = react.useMemo(() => {
+    const debounceCallback = React.useMemo(() => {
         return callback ? debounce(callback, delay || DEBOUNCE_DELAY) : undefined;
     }, [callback, delay]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         debounceCallback && window.addEventListener("resize", debounceCallback);
         return () => debounceCallback && window.removeEventListener("resize", debounceCallback);
     }, [debounceCallback]);
@@ -4875,8 +4877,8 @@ const useWindowResize = (callback, delay) => {
 
 const useLayerGroupMenu = () => {
     const [isMenuOpen, toggleMenu] = useToggle(false);
-    const options = react.useMemo(() => [], []);
-    const selectOption = react.useCallback(() => {
+    const options = React.useMemo(() => [], []);
+    const selectOption = React.useCallback(() => {
         // ...
     }, [toggleMenu]);
     return {
@@ -4891,7 +4893,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
     const { projectInfo, updateProject } = useWidgetContext();
     const { pageIndex } = useWidgetPage();
     const { isMenuOpen, toggleMenu, options, selectOption } = useLayerGroupMenu();
-    const onToggleExpand = react.useCallback((name, isExpanded) => {
+    const onToggleExpand = React.useCallback((name, isExpanded) => {
         if (!projectInfo) {
             return;
         }
@@ -4900,7 +4902,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
         page.layers = findAnd.changeProps(projectInfo.content.items, { name }, { isExpanded });
         updateProject(newProjectInfo);
     }, [pageIndex, projectInfo, updateProject]);
-    const onToggleVisibility = react.useCallback((name, isVisible) => {
+    const onToggleVisibility = React.useCallback((name, isVisible) => {
         if (!projectInfo) {
             return;
         }
@@ -4944,11 +4946,11 @@ const treeNodesToProjectItems = (currentProjectItems, treeNodes) => {
     return combineProjectItems(treeNodes);
 };
 
-const LayerTree = ({ layers, LayerItemComponent, onlyMainTools }) => {
-    const { projectInfo, updateProject } = useWidgetContext();
+const LayerTree = ({ layers, onlyMainTools }) => {
+    const { projectInfo, updateProject, components: { LayerItem } } = useWidgetContext();
     const { pageIndex } = useWidgetPage();
-    const nodes = react.useMemo(() => layers?.map(layer => createTreeNode(layer, LayerItemComponent, onlyMainTools)), [LayerItemComponent, layers, onlyMainTools]);
-    const onUpdate = react.useCallback((updatedNodes) => {
+    const nodes = React.useMemo(() => layers?.map(layer => createTreeNode(layer, LayerItem, onlyMainTools)), [LayerItem, layers, onlyMainTools]);
+    const onUpdate = React.useCallback((updatedNodes) => {
         const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
         const page = getPagesFromProjectInfo(newProjectInfo)?.[pageIndex - 1];
         if (!page) {
@@ -5229,6 +5231,18 @@ const AttributeLabel = styled(uilibGl.Description) `
   margin-bottom: ${({ forCheckbox }) => (forCheckbox ? "0.75rem" : "0.25rem")} !important;
   padding-left: ${({ isEdit }) => (isEdit ? "0.5rem" : "0")};
 `;
+const FeatureControls = styled(uilibGl.Flex) `
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: nowrap;
+  position: relative;
+  flex-shrink: 0;
+
+  button {
+    padding: 0;
+    width: auto;
+  }
+`;
 
 const getAttributeByName = (attributeName, attributes) => {
     return Array.isArray(attributeName)
@@ -5254,7 +5268,7 @@ const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
         : valueOrDefault;
     if (!wrap)
         return resultValue;
-    return (jsxRuntime.jsxs(react.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius, style: style })) : (jsxRuntime.jsx(ElementValueWrapper, { "data-id": id, "data-templatename": templateName, style: style, children: resultValue })), withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius, style: style })) : (jsxRuntime.jsx(ElementValueWrapper, { "data-id": id, "data-templatename": templateName, style: style, children: resultValue })), withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
 };
 
 const getAttributeValue = (element, attributes) => {
@@ -5265,7 +5279,7 @@ const getAttributeValue = (element, attributes) => {
         return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.name, checked: attribute.value });
     }
     if (Array.isArray(element?.attributeName)) {
-        const concatAttributes = element.attributeName.map((attributeName) => attributes.find(({ name }) => name === attributeName)?.value || "");
+        const concatAttributes = element.attributeName.map((attributeName) => attributes?.find(({ name }) => name === attributeName)?.value || "");
         value = concatAttributes.join(separator || ", ");
     }
     else {
@@ -5287,7 +5301,7 @@ const getChartMarkers = (items, markers) => {
     })) || []);
 };
 
-const ContainersGroupContainer = react.memo(({ elementConfig, type, renderElement }) => {
+const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, children, options, style } = elementConfig || {};
     const { column, expandable, expanded } = options || {};
@@ -5296,7 +5310,7 @@ const ContainersGroupContainer = react.memo(({ elementConfig, type, renderElemen
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { style: style, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
-const OneColumnContainer = react.memo(({ elementConfig, renderElement }) => {
+const OneColumnContainer = React.memo(({ elementConfig, renderElement }) => {
     const { options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
     const value = renderElement({ id: "value" });
@@ -5306,10 +5320,10 @@ const OneColumnContainer = react.memo(({ elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(Container, { style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
 });
 
-const TwoColumnContainer = react.memo(({ config, elementConfig, type, renderElement }) => {
+const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElement }) => {
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
-    const renderContainer = react.useCallback((element, attribute) => {
+    const renderContainer = React.useCallback((element, attribute) => {
         const { options, style, children } = element || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
         const hasUnits = children?.some(({ id }) => id === "units");
@@ -5359,7 +5373,7 @@ const InnerContainerWrapper = styled.div `
   opacity: ${({ hasAnyFilter, isFiltered }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
 `;
 
-const DataSourceInnerContainer = react.memo(({ config, elementConfig, feature, maxValue, type, index, innerComponent }) => {
+const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, maxValue, type, index, innerComponent }) => {
     const { t } = useGlobalContext();
     const { expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
     const { pageIndex, currentPage } = useWidgetPage(type);
@@ -5371,12 +5385,12 @@ const DataSourceInnerContainer = react.memo(({ config, elementConfig, feature, m
     });
     const { options, children } = elementConfig || {};
     const { relatedDataSource, filterName, column } = options || {};
-    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(({ name }) => name === aliasElement.attributeName) : null), [aliasElement, attributes]);
+    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(({ name }) => name === aliasElement.attributeName) : null), [aliasElement, attributes]);
     const value = aliasAttribute?.value;
     const InnerContainer = innerComponent;
-    const data = react.useMemo(() => getDataFromRelatedFeatures({
+    const data = React.useMemo(() => getDataFromRelatedFeatures({
         t,
         config: elementConfig,
         filters: currentPage?.filters,
@@ -5399,7 +5413,7 @@ const DataSourceInnerContainer = react.memo(({ config, elementConfig, feature, m
         valueElement?.attributeName
     ]);
     const { hasAnyFilter, isFiltered, onFilter } = useFeatureFilters(type, filterName, data);
-    const render = react.useMemo(() => getRenderElement({
+    const render = React.useMemo(() => getRenderElement({
         config,
         elementConfig,
         attributes,
@@ -5530,7 +5544,7 @@ const ProgressTotal = styled(uilibGl.Flex) `
   margin-top: 1rem;
 `;
 
-const DataSourceProgressContainer = react.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
+const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
     const { t } = useGlobalContext();
     const { dataSources, expandedContainers } = useWidgetContext(type);
     const { dataSource, layerInfo } = useRelatedDataSourceAttributes({
@@ -5544,17 +5558,17 @@ const DataSourceProgressContainer = react.memo(({ config, elementConfig, type, i
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
     const { sliceItems, checkIsSliced, showMore, onShowMore } = useShownOtherItems(options);
-    const totalUnits = react.useMemo(() => unitsElement?.type === "attributeUnits"
+    const totalUnits = React.useMemo(() => unitsElement?.type === "attributeUnits"
         ? attributes?.find(({ attributeName }) => attributeName === unitsElement.attributeName)?.stringFormat
             ?.unitsLabel
         : dataSource?.features?.[0]?.attributes[unitsElement?.attributeName], [attributes, dataSource?.features, unitsElement?.attributeName, unitsElement?.type]);
-    const totalValue = react.useMemo(() => {
+    const totalValue = React.useMemo(() => {
         const attribute = attributes?.find(({ attributeName }) => attributeName === valueElement?.attributeName);
         const { type: attributeType, stringFormat } = attribute || {};
         const result = dataSource?.features?.reduce((total, feature) => total + feature.attributes[valueElement?.attributeName], 0);
         return formatAttributeValue({ t, type: attributeType, value: result, stringFormat, noUnits: !!unitsElement?.type });
     }, [attributes, dataSource?.features, unitsElement?.type, valueElement?.attributeName]);
-    const currentMaxValue = react.useMemo(() => {
+    const currentMaxValue = React.useMemo(() => {
         if (typeof maxValue === "string") {
             return dataSource?.features?.[0]?.attributes[maxValue];
         }
@@ -5570,7 +5584,7 @@ const DataSourceProgressContainer = react.memo(({ config, elementConfig, type, i
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { 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" }) : t("showAll", { ns: "dashboard" }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
-const ProgressContainer = react.memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
+const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
     const { t } = useGlobalContext();
     const { dataSources } = useWidgetContext(type);
     const { attributes } = useRelatedDataSourceAttributes({
@@ -5588,23 +5602,23 @@ const ProgressContainer = react.memo(({ type, elementConfig, feature, maxValue,
     const value = !lodash.isNil(valueAttribute?.value) ? +valueAttribute.value : +valueElement.value || 0;
     const currentMaxValue = (maxValue || optionMaxValue);
     const width = `${Math.min(100, (value / currentMaxValue) * 100).toFixed(2)}%`;
-    const renderTooltipAlias = react.useMemo(() => renderElement({
+    const renderTooltipAlias = React.useMemo(() => renderElement({
         id: "alias",
         wrap: false
     }), [renderElement]);
-    const renderTooltipValue = react.useMemo(() => renderElement({
+    const renderTooltipValue = React.useMemo(() => renderElement({
         id: "value",
         wrap: false
     }), [renderElement]);
-    const renderAlias = react.useMemo(() => renderElement({ id: "alias" }), [renderElement]);
-    const renderValue = react.useMemo(() => renderElement({ id: "value" }), [renderElement]);
-    const renderIcon = react.useMemo(() => renderElement({
+    const renderAlias = React.useMemo(() => renderElement({ id: "alias" }), [renderElement]);
+    const renderValue = React.useMemo(() => renderElement({ id: "value" }), [renderElement]);
+    const renderIcon = React.useMemo(() => renderElement({
         id: "icon",
         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" }) }), jsxRuntime.jsx("div", { children: formatAttributeValue({ t, type: valueType, value: currentMaxValue, stringFormat }) })] })] })), [currentMaxValue, renderTooltipAlias, renderTooltipValue, stringFormat, t, valueType]);
-    const color = react.useMemo(() => colorAttribute
-        ? attributes.find(({ name }) => name === colorAttribute)?.value
+    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" }) }), jsxRuntime.jsx("div", { children: formatAttributeValue({ t, type: valueType, value: currentMaxValue, stringFormat }) })] })] })), [currentMaxValue, renderTooltipAlias, renderTooltipValue, stringFormat, t, valueType]);
+    const color = React.useMemo(() => colorAttribute
+        ? attributes?.find(({ name }) => name === 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, 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 })] })] })] })) }));
 });
@@ -5787,29 +5801,29 @@ const TooltipContainer = styled.div `
   }
 `;
 
-const FiltersContainer = react.memo(({ elementConfig, config, type, renderElement }) => {
+const FiltersContainer = React.memo(({ elementConfig, config, type, renderElement }) => {
     const { filters, dataSources, expandedContainers } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
     const { filters: configFilters } = currentPage;
     const { id, style, options } = elementConfig || {};
     const { padding, bgColor, fontColor, fontSize, expandable, expanded } = options || {};
-    const isLoading = react.useMemo(() => checkIsLoading(dataSources, config, configFilters), [configFilters, config, dataSources]);
-    const filterItems = react.useMemo(() => elementConfig?.children?.filter(child => child.options?.filterName), [elementConfig?.children]);
-    const renderFilter = react.useCallback((filter, index) => {
+    const isLoading = React.useMemo(() => checkIsLoading(dataSources, config, configFilters), [configFilters, config, dataSources]);
+    const filterItems = React.useMemo(() => elementConfig?.children?.filter(child => child.options?.filterName), [elementConfig?.children]);
+    const renderFilter = React.useCallback((filter, index) => {
         const FilterComponent = getFilterComponent(filter.type);
         return jsxRuntime.jsx(FilterComponent, { type: type, filter: filter, config: config, elementConfig: filter }, index);
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const selectedItems = react.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
+    const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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, { style: style, "$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 })] }));
 });
 
-const DefaultAttributesContainer = react.memo(({ type, renderElement }) => {
+const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
     const { attributes } = useWidgetContext(type);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributes?.map(({ name }) => (jsxRuntime.jsx(Container, { children: renderElement({ id: name }) }, name))) }));
 });
 
-const ChartContainer = react.memo(({ elementConfig, isVisible, type, renderElement }) => {
+const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
     const { options, children } = elementConfig || {};
     const { twoColumns, hideEmpty } = options || {};
     const aliasElement = children.find(({ id }) => id === "alias");
@@ -5827,17 +5841,17 @@ const ChartContainer = react.memo(({ elementConfig, isVisible, type, renderEleme
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
-const PagesContainer = react.memo(({ type }) => {
+const PagesContainer = React.memo(({ type }) => {
     const { config } = useWidgetConfig(type);
     const { pageIndex, currentPage } = useWidgetPage(type);
     const { selectedTabId, setSelectedTabId, expandedContainers, attributes } = useWidgetContext(type);
     const { options } = config || {};
     const { column } = options || {};
     const isColumn = column === undefined || column;
-    const filteredChildren = react.useMemo(() => !selectedTabId
+    const filteredChildren = React.useMemo(() => !selectedTabId
         ? currentPage.children
         : currentPage.children.filter(item => !item.options?.tabId || item.options.tabId === selectedTabId), [currentPage.children, selectedTabId]);
-    const renderElement = react.useMemo(() => getRenderElement({
+    const renderElement = React.useMemo(() => getRenderElement({
         type,
         config,
         elementConfig: currentPage,
@@ -5860,11 +5874,11 @@ const PagesContainer = react.memo(({ type }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsxRuntime.jsx(Container, { isColumn: isColumn, isMain: true, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
 });
 
-const TwoColumnsInnerContainer = react.memo(({ renderElement }) => {
+const TwoColumnsInnerContainer = React.memo(({ renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TwoColumnContainerWrapper, { children: [jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ContainerAlias, { children: renderElement({ id: "firstAlias" }) }), jsxRuntime.jsx(ContainerValue, { big: true, children: renderElement({ id: "firstValue" }) })] }), jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ContainerAlias, { children: renderElement({ id: "secondAlias" }) }), jsxRuntime.jsx(ContainerValue, { big: true, children: renderElement({ id: "secondValue" }) })] })] }), renderElement({ id: "thirdContainer" })] }));
 });
 
-const ImageContainerBg = styled.div `
+const ImageContainerBg$1 = styled.div `
   position: absolute;
   top: 0;
   bottom: 0;
@@ -5924,9 +5938,9 @@ const ImageContainerWrapper = styled(uilibGl.Flex) `
   }
 `;
 
-const ImageContainer = react.memo(({ elementConfig, renderElement }) => {
+const ImageContainer = React.memo(({ elementConfig, renderElement }) => {
     const { style } = elementConfig || {};
-    return (jsxRuntime.jsxs(ImageContainerWrapper, { style: style, children: [jsxRuntime.jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({ id: "image" }) })] }));
+    return (jsxRuntime.jsxs(ImageContainerWrapper, { style: style, 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" }) })] }));
 });
 
 const IconContainerWrapper = styled(uilibGl.Flex) `
@@ -5977,16 +5991,16 @@ const IconContainerText = styled.div `
   color: ${({ theme: { palette } }) => palette.textSecondary};
 `;
 
-const IconContainer = react.memo(({ elementConfig, renderElement }) => {
+const IconContainer = React.memo(({ elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(IconContainerWrapper, { style: elementConfig?.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 DataSourceContainer = react.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
+const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
     const { dataSources, expandedContainers } = useWidgetContext(type);
     const { id, style, options } = elementConfig || {};
     const { column = true, relatedDataSource, expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const dataSource = react.useMemo(() => dataSources?.find(({ name }) => name === relatedDataSource), [dataSources, relatedDataSource]);
+    const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === relatedDataSource), [dataSources, relatedDataSource]);
     if (!relatedDataSource)
         return null;
     if (dataSource && !dataSource.features) {
@@ -6075,26 +6089,26 @@ const ContainerTitle = styled(uilibGl.Flex) `
     `}
 `;
 
-const TitleContainer = react.memo(({ containerId, templateName, layerNames, fontColor, expandable, expanded, isVisible, elementConfig, renderElement, type, }) => {
+const TitleContainer = React.memo(({ containerId, templateName, layerNames, fontColor, expandable, expanded, isVisible, elementConfig, renderElement, type, }) => {
     const { expandContainer, expandedContainers, setDashboardLayer } = useWidgetContext(type);
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = styled.useTheme();
     const { style, options } = elementConfig || {};
     const { simple } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
-    const onClick = react.useCallback(() => {
+    const onClick = React.useCallback(() => {
         if (!expandable)
             return;
         expandContainer(containerId, expanded);
     }, [containerId, expandContainer, expandable, expanded]);
-    const onToggleVisibility = react.useCallback(() => {
+    const onToggleVisibility = React.useCallback(() => {
         toggleVisibility();
         layerNames?.forEach(layerName => {
             setDashboardLayer({ name: layerName, isVisible: !layersVisibility });
         });
     }, [layerNames, layersVisibility, setDashboardLayer, toggleVisibility]);
-    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 &&
+    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, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
@@ -6104,11 +6118,11 @@ const ContainerDivider = styled(uilibGl.Divider) `
   border-color: ${({ theme: { palette }, $bgColor }) => $bgColor || palette.elementDeep};
 `;
 
-const DividerContainer = react.memo(({ elementConfig, config }) => {
+const DividerContainer = React.memo(({ elementConfig, config }) => {
     return (jsxRuntime.jsx(Container, { style: elementConfig?.style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
 });
 
-const SlideshowContainer = react.memo(({ config, elementConfig, type }) => {
+const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
     const { pageIndex, expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
     const { attributes, layerInfo } = useRelatedDataSourceAttributes({
         type,
@@ -6118,7 +6132,7 @@ const SlideshowContainer = react.memo(({ config, elementConfig, type }) => {
     const { id, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const render = react.useMemo(() => getRenderElement({
+    const render = React.useMemo(() => getRenderElement({
         config,
         elementConfig,
         attributes,
@@ -6146,7 +6160,7 @@ const SlideshowContainer = react.memo(({ config, elementConfig, type }) => {
                         }) })] }))] }));
 });
 
-const CameraContainer = react.memo(({ elementConfig, type, renderElement }) => {
+const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options, style } = elementConfig || {};
     const { expandable, expanded } = options || {};
@@ -6232,28 +6246,28 @@ const SwiperContainer = styled.div `
   }
 `;
 
-const TabsContainer = react.memo(({ elementConfig, type }) => {
+const TabsContainer = React.memo(({ elementConfig, type }) => {
     const { palette } = styled.useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
     const { options, style, children: tabs } = elementConfig || {};
     const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12 } = options || {};
-    const renderIcon = react.useCallback((icon, active) => {
+    const renderIcon = React.useCallback((icon, active) => {
         if (!icon)
             return null;
         if (!icon.includes("."))
             return jsxRuntime.jsx(uilibGl.Icon, { kind: icon });
         return icon.endsWith(".svg") ? (jsxRuntime.jsx(SvgImage, { url: icon, width: 16, fontColor: active ? palette.textContrast : palette.textSecondary })) : (jsxRuntime.jsx("img", { src: icon, alt: "" }));
     }, [palette.textContrast, palette.textSecondary]);
-    const onClick = react.useCallback((id) => {
+    const onClick = React.useCallback((id) => {
         setSelectedTabId(id);
         window.location.hash = `#${id}`;
     }, [setSelectedTabId]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!selectedTabId) {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsxRuntime.jsx(SwiperContainer, { style: style, children: jsxRuntime.jsx(react$1.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxRuntime.jsxs(react$1.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: id })] }, id))) }) }));
+    return (jsxRuntime.jsx(SwiperContainer, { style: style, children: jsxRuntime.jsx(react.Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxRuntime.jsxs(react.SwiperSlide, { children: [jsxRuntime.jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsxRuntime.jsx(TabValue, { children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsxRuntime.jsx(TabAnchor, { id: id })] }, id))) }) }));
 });
 
 const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex) `
@@ -6328,7 +6342,7 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex) `
 `;
 
 const ALIAS_DEFAULT_MAX_LENGTH = 28;
-const RoundedBackgroundContainer = react.memo(({ type, elementConfig, feature, renderElement }) => {
+const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, renderElement }) => {
     const { dataSources } = useWidgetContext(type);
     const { attributes } = useRelatedDataSourceAttributes({
         type,
@@ -6342,13 +6356,13 @@ const RoundedBackgroundContainer = react.memo(({ type, elementConfig, feature, r
     const unitsElement = children?.find(({ id }) => id === "units");
     const valueElement = children?.find(({ id }) => id === "value");
     const value = renderElement({ id: "value" });
-    const color = react.useMemo(() => attributes.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
+    const color = React.useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
     if (!value && hideEmpty)
         return null;
     return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$bigIcon": bigIcon, children: [renderElement({ id: "icon", wrap: false }), jsxRuntime.jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsxRuntime.jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] }), jsxRuntime.jsx(ContainerAlias, { style: aliasElement?.style, children: jsxRuntime.jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })] }));
 });
 
-const AddFeatureContainer = react.memo(({ elementConfig }) => {
+const AddFeatureContainer = React.memo(({ elementConfig }) => {
     const { children, style } = elementConfig || {};
     return (jsxRuntime.jsx(Container, { style: style, children: children
             .filter(({ type }) => type === "button")
@@ -6371,21 +6385,20 @@ const LayersContainerWrapper = styled(Container) `
   }
 `;
 
-const LayersContainer = react.memo(({ type, elementConfig, renderElement }) => {
-    const { LayerItemComponent } = useGlobalContext();
+const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
     const { id, options, style } = elementConfig || {};
     const { layerNames, expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const layers = react.useMemo(() => {
+    const layers = React.useMemo(() => {
         if (!currentPage?.layers)
             return [];
         if (!layerNames?.length)
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, LayerItemComponent: LayerItemComponent, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const containerComponents = {
@@ -6414,198 +6427,521 @@ const containerComponents = {
 
 const getContainerComponent = (innerTemplateName) => innerTemplateName ? containerComponents[innerTemplateName] || containerComponents.default : null;
 
-const getDataFromAttributes = (t, config, attributes) => {
-    const colors = config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS;
-    const data = config?.children?.map(({ attributeName }, index) => {
-        const attribute = attributes?.find(({ name }) => name === attributeName);
-        return {
-            name: attribute?.name || "",
-            value: attribute ? Number(attribute.value) : 0,
-            color: colors[index] || FEATURE_CARD_OTHER_COLOR
-        };
-    });
-    if (config?.options?.orderByValue) {
-        data.sort((a, b) => b.value - a.value);
-    }
-    const isOtherSliced = config?.options?.otherItems && config.options.otherItems < data.length;
-    if (!isOtherSliced)
-        return data;
-    const otherValue = data
-        .slice(0, config?.options?.otherItems)
-        .reduce((prev, { value }) => prev + value, 0);
-    return [
-        ...data?.slice(0, config.options?.otherItems),
-        {
-            name: t("other", { ns: "dashboard" }),
-            color: FEATURE_CARD_OTHER_COLOR,
-            value: Number(otherValue)
-        }
-    ];
-};
-
-const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSource, layerInfo }) => {
-    if (!dataSource || !dataSource?.features?.length) {
-        return [];
-    }
-    const { colors } = config.options;
-    const layerDefinition = getLayerDefinition(layerInfo);
-    let data = JSON.parse(JSON.stringify(dataSource?.features));
-    const sortAttribute = config?.options?.orderByValue
-        ? relatedConfig.attributeName
-        : config?.options?.orderByTitle
-            ? relatedConfig.attributeTitle
-            : null;
-    if (sortAttribute) {
-        data.sort((a, b) => b.attributes[sortAttribute] - a.attributes[sortAttribute]);
-    }
-    const isOtherSliced = config?.options?.otherItems && config.options.otherItems < data.length;
-    const otherValue = isOtherSliced
-        ? data
-            .slice(config.options.otherItems)
-            .reduce((prev, { attributes }) => prev + attributes[relatedConfig.attributeName], 0)
-        : null;
-    if (isOtherSliced) {
-        data = data.slice(0, config?.options?.otherItems);
-    }
-    const gradientArray = relatedConfig.chartAxis && colors?.length < data.length
-        ? new Gradient()
-            .setColorGradient(colors[0], colors[colors.length - 1])
-            .setMidpoint(data.length)
-            .getColors()
-        : colors;
-    const filter = getConfigFilter(relatedConfig?.filterName, filters);
-    const result = data.reduce((acc, feature, index) => {
-        if (relatedConfig?.filterName && !filter) {
-            return acc;
-        }
-        const attributeName = feature.attributes[relatedConfig.attributeName];
-        const attributeTitle = feature.attributes[relatedConfig.attributeTitle];
-        const attributeColor = feature.attributes[relatedConfig.attributeColor];
-        return [
-            ...acc,
-            {
-                name: formatAttributeValue({
-                    t,
-                    type: layerDefinition.attributes[relatedConfig.attributeTitle]?.type,
-                    value: attributeTitle,
-                    stringFormat: layerDefinition.attributes[relatedConfig.attributeTitle]?.stringFormat
-                }),
-                value: attributeName === null ? null : Number(attributeName),
-                color: attributeColor || gradientArray?.[index] || FEATURE_CARD_OTHER_COLOR,
-                min: filter?.attributeMin ? feature.attributes[filter.attributeMin] : null,
-                max: filter?.attributeMin ? feature.attributes[filter.attributeMax] : null
-            }
-        ];
-    }, []);
-    if (isOtherSliced) {
-        result.push({
-            name: t("other", { ns: "dashboard" }),
-            color: FEATURE_CARD_OTHER_COLOR,
-            value: Number(otherValue)
-        });
-    }
-    return result;
-};
-
-const getDefaultConfig = ({ title, defaultTitle, items, baseMapName, position, resolution, srid, }) => {
-    const dashboardConfiguration = JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_CONFIG));
-    const defaultPages = JSON.parse(JSON.stringify(DEFAULT_PAGES_CONFIG));
-    const defaultPage = createConfigPage({ title, baseMapName, position, resolution, defaultTitle });
-    if (items?.length) {
-        const contentItems = items.map(item => createConfigLayer(item.name));
-        defaultPage.layers.push(...contentItems);
-    }
-    defaultPages.children.push(defaultPage);
-    dashboardConfiguration.children.push(defaultPages);
-    return dashboardConfiguration;
-};
-
-const ElementImage = react.memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const { value, attributeName, options } = elementConfig || {};
-    const { width } = options || {};
-    const firstImage = react.useMemo(() => {
-        if (value) {
-            return value.toString();
-        }
-        if (!attributeName || Array.isArray(attributeName)) {
-            return null;
-        }
-        const attribute = attributes.find(item => item.name === attributeName);
-        return attribute?.value?.split(";")?.[0];
-    }, [attributeName, attributes, value]);
-    return firstImage ? jsxRuntime.jsx("img", { src: firstImage, alt: firstImage, width: width }) : null;
-});
-
-const SmallPreviewContainer$1 = styled.div `
-  width: 100%;
-  height: 100%;
-`;
+var img$3 = "data:image/png;base64,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";
 
-const AttributeGalleryContainer = styled.div `
-  && {
-    width: calc(100% + 3rem);
-  }
+const getMaskColor = (isDark) => (isDark ? "0, 0, 0" : "255, 255, 255");
+const DefaultHeaderContainer = styled(uilibGl.Flex) `
+  flex-direction: column;
+  position: relative;
+  flex-shrink: 0;
+  min-height: 8.375rem;
+  margin-bottom: -1.5rem;
+  padding: 1.5rem 1.5rem 0;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  overflow: hidden;
 
-  min-height: 12.625rem;
-  background-color: ${({ theme: { palette } }) => palette.element};
+  > * {
+    z-index: 1;
+  }
 
-  img {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+
+    ${({ image, isDark }) => image
+    ? styled.css `
+            background: url(${image}) 0 0 no-repeat;
+            background-size: cover;
+          `
+    : styled.css `
+            background: url(${img$3}) 50% 0 no-repeat;
+            opacity: ${isDark ? 1 : 0.5};
+          `}
   }
-`;
-const LinearProgressContainer = styled(uilibGl.Flex) `
-  align-items: center;
-  justify-content: center;
-  min-height: inherit;
 
+  ${({ image, isDark }) => image &&
+    styled.css `
+      &::before {
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(${getMaskColor(isDark)}, 1),
+          rgba(${getMaskColor(isDark)}, 0)
+        );
+        mask-image: linear-gradient(to bottom, rgba(${getMaskColor(isDark)}, 1), rgba(${getMaskColor(isDark)}, 0));
+      }
+    `}
   ${uilibGl.LinearProgress} {
-    max-width: 4rem;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 `;
-const NoLiveSnapshotContainer = styled(uilibGl.Flex) `
-  flex-direction: column;
+const TopContainer = styled(uilibGl.Flex) `
+  z-index: 1;
+  position: relative;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 100%;
+  align-items: flex-start;
+`;
+const TopContainerButtons = styled(uilibGl.Flex) `
   align-items: center;
+  width: auto;
+  margin-right: -0.5rem;
 
-  span[kind="alert"] {
-    width: 2rem;
-    height: 2rem;
+  button {
+    width: auto;
+    height: 1rem;
+    padding: 0 0.5rem;
+  }
+`;
+const LogoContainer = styled(uilibGl.Flex) `
+  max-width: calc(100% - 1.4rem);
+  flex-grow: 1;
+  font-size: 0;
 
-    &:after {
-      font-size: 2rem;
-      color: ${({ theme: { palette } }) => palette.elementDeep};
-    }
+  & > span::after {
+    font-size: 2rem;
   }
 
-  ${uilibGl.Description} {
-    font-size: 0.75rem;
-    color: ${({ theme: { palette } }) => palette.textDisabled};
+  img {
+    max-height: 1.875rem;
   }
 `;
-const SmallPreviewControl = styled(uilibGl.IconButton) `
-  cursor: ${({ $isDisabled }) => ($isDisabled ? "default" : "pointer")};
-  z-index: 3;
-  position: absolute;
-  top: 50%;
-  width: 2.5rem;
-  height: 2.5rem;
-  margin-top: -1.25rem;
-  background-color: rgba(61, 61, 61, 0.8);
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.smallest};
+const PageTitle = styled(uilibGl.H2) `
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  pointer-events: initial;
+  font-family: "Nunito Sans", serif;
+`;
+
+exports.ThemeName = void 0;
+(function (ThemeName) {
+    ThemeName["Light"] = "light";
+    ThemeName["Dark"] = "dark";
+})(exports.ThemeName || (exports.ThemeName = {}));
+
+exports.TmsType = void 0;
+(function (TmsType) {
+    TmsType["WMS"] = "WMS";
+    TmsType["TMS"] = "TMS";
+    TmsType["ArcGIS"] = "ArcGIS";
+})(exports.TmsType || (exports.TmsType = {}));
+exports.EditGeometryType = void 0;
+(function (EditGeometryType) {
+    EditGeometryType["Raster"] = "raster";
+})(exports.EditGeometryType || (exports.EditGeometryType = {}));
+
+const DashboardDefaultHeader = React.memo(() => {
+    const { components: { ProjectCatalogMenu, ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
+    const { pageId, image, icon, tooltip, themeName } = useDashboardHeader();
+    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: image, isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsxs(TopContainerButtons, { children: [jsxRuntime.jsx(ProjectCatalogMenu, {}), jsxRuntime.jsx(ProjectPanelMenu, {})] })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { flexGrow: 1, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, children: jsxRuntime.jsx(ProjectPagesMenu, {}) })) }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
+});
+
+const HeaderFrontView = styled(uilibGl.Flex) `
+  z-index: 10;
+  position: relative;
+  justify-content: space-between;
+  align-items: ${({ isDefault }) => (isDefault ? "center" : "flex-start")};
+  width: 100%;
+  font: ${({ theme: { fonts } }) => fonts.subtitle};
+`;
+const HeaderContainer = styled(uilibGl.FlexSpan) `
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: nowrap;
+  width: calc(100% - 48px);
+`;
+const FeatureTitleContainer = styled.div `
+  display: -webkit-box;
+  max-width: 100%;
+  width: 100%;
+  margin: 0.5rem 0;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
 
-  span:after {
-    color: ${({ $isDisabled }) => ($isDisabled ? "rgba(255, 255, 255, 0.28)" : "rgba(255, 255, 255, 1)")};
-    transition: color ${uilibGl.transition.hover};
+  & > ${uilibGl.FlexSpan} {
+    cursor: ${({ clickable }) => clickable && "pointer"};
+
+    &:hover {
+      color: ${({ clickable, theme: { palette } }) => clickable && palette.primary};
+    }
   }
 `;
-const SmallPreviewCounter = styled(uilibGl.Flex) `
-  z-index: 3;
-  position: absolute;
-  bottom: 0.625rem;
-  left: 0;
+const LayerDescription = styled(uilibGl.Description) `
+  width: calc(100% - 4rem);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const HeaderTitleContainer = styled(uilibGl.Flex) `
+  flex-direction: column;
   width: 100%;
-  height: 1rem;
-  justify-content: center;
+`;
+const RowHeaderMixin = styled.css `
+  &&& {
+    min-height: auto;
+
+    ${FeatureTitleContainer}, ${LayerDescription} {
+      text-align: left;
+    }
+  }
+
+  ${HeaderContainer} {
+    flex-direction: row;
+  }
+
+  ${FeatureTitleContainer} {
+    max-width: calc(100% - 3.8rem);
+  }
+`;
+const Header = styled(uilibGl.Flex) `
+  z-index: 1;
+  position: relative;
+  top: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: 0.5rem;
+
+  ${HeaderContainer} {
+    flex-direction: column;
+  }
+
+  ${({ $isRow }) => $isRow && RowHeaderMixin};
+`;
+
+const HeaderTitle = ({ noFeature }) => {
+    const { t } = useGlobalContext();
+    const { attributes, layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const zoomToFeatures = useZoomToFeatures();
+    const { alias, name, layerDefinition } = layerInfo || {};
+    const resultDescription = alias || name || "";
+    const resultTitle = React.useMemo(() => {
+        const layerDefinitionAttribute = layerDefinition && attributes?.length
+            ? attributes.find(item => item.name === layerDefinition.titleAttribute)
+            : null;
+        const layerDefinitionTitle = layerDefinition?.titleAttribute && layerDefinitionAttribute?.value
+            ? layerDefinitionAttribute.value
+            : null;
+        return ((!!layerDefinitionTitle &&
+            formatAttributeValue({
+                t,
+                type: layerDefinitionAttribute.type,
+                value: layerDefinitionTitle,
+                stringFormat: layerDefinitionAttribute.stringFormat,
+            })) ||
+            feature?.id);
+    }, [attributes, feature, layerDefinition]);
+    return (jsxRuntime.jsxs(HeaderTitleContainer, { children: [noFeature ? (jsxRuntime.jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard" }) })) : (jsxRuntime.jsx(FeatureTitleContainer, { clickable: true, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsxRuntime.jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+};
+
+const LayerIconContainer = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 0.75rem;
+`;
+const AlertIconContainer = styled(uilibGl.Flex) `
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+
+  ${uilibGl.Icon} {
+    :after {
+      color: ${({ theme: { palette } }) => palette.error};
+    }
+  }
+`;
+
+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='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$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 %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 = "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";
+
+const LayerIcon = ({ layerInfo }) => {
+    const renderSymbol = React.useMemo(() => {
+        if (!layerInfo.geometryType) {
+            return (jsxRuntime.jsx(AlertIconContainer, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "warning" }) }));
+        }
+        switch (layerInfo.geometryType) {
+            case api.GeometryType.Polyline:
+                return jsxRuntime.jsx("img", { src: img$1, alt: "" });
+            case api.GeometryType.Polygon:
+                return jsxRuntime.jsx("img", { src: img, alt: "" });
+            case api.GeometryType.Point:
+            default:
+                return jsxRuntime.jsx("img", { src: img$2, alt: "" });
+        }
+    }, [layerInfo.geometryType]);
+    return jsxRuntime.jsx(LayerIconContainer, { children: renderSymbol });
+};
+
+const FeatureCardDefaultHeader = ({ noFeature }) => {
+    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    return (jsxRuntime.jsx(Header, { "$isRow": true, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: true, children: [jsxRuntime.jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }));
+};
+
+const HeaderFontColorMixin$1 = styled.css `
+  ${HeaderTitleContainer}, ${LayerDescription} {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
+const HeaderWrapperMixin$1 = styled.css `
+  padding: 0.5rem 0.5rem 0;
+
+  ${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$1};
+`;
+const GradientHeaderWrapper = styled.div `
+  ${Header} {
+    background: ${({ $bgColor }) => $bgColor || "radial-gradient(129.21% 133.22% at 51.94% 0%, #e8fffe 9.48%, #5fcaff 100%)"};
+  }
+
+  ${HeaderContainer} {
+    align-items: center;
+  }
+
+  ${HeaderTitleContainer} {
+    margin-left: 0;
+    text-align: center;
+  }
+
+  ${FeatureTitleContainer} {
+    text-align: center;
+  }
+
+  ${LayerDescription} {
+    text-align: center;
+  }
+
+  ${HeaderWrapperMixin$1};
+`;
+
+const FeatureCardGradientHeader = ({ isRow }) => {
+    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const { header, options } = config || {};
+    const renderElement = useHeaderRender(header);
+    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": options?.fontColor, "$bgColor": options?.bgColor, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsx(Header, { "$isRow": isRow, children: jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+                                        id: "title",
+                                        wrap: false,
+                                    }), description: renderElement({
+                                        id: "description",
+                                        wrap: false,
+                                    }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+};
+
+const HeaderFontColorMixin = styled.css `
+  ${HeaderTitleContainer}, ${LayerDescription} {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
+const HeaderWrapperMixin = styled.css `
+  padding: 0.5rem 0.5rem 0;
+
+  ${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) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 7.5rem;
+  height: 100%;
+
+  span[kind]:after {
+    font-size: 7.5rem;
+  }
+
+  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 IconHeaderWrapper = styled.div `
+  ${Header} {
+    width: calc(100% + 3rem);
+    margin: -1.5rem -1.5rem 0 -1.5rem;
+    padding: 1.5rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
+  }
+
+  ${HeaderWrapperMixin};
+
+  ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
+`;
+
+const FeatureCardIconHeader = ({ isRow }) => {
+    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const { header, options } = config || {};
+    const renderElement = useHeaderRender(header);
+    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": options?.fontColor, "$bgColor": options?.bgColor, "$bigIcon": options?.bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+                                            id: "title",
+                                            wrap: false,
+                                        }), description: renderElement({
+                                            id: "description",
+                                            wrap: false,
+                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(HeaderIcon, { children: renderElement({
+                            id: "icon",
+                            wrap: false,
+                        }) })] }) }) }));
+};
+
+const ImageContainerButton = styled(uilibGl.FlatButton) `
+  min-height: 1.5rem;
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
+  background-color: ${({ theme: { palette } }) => palette.primary};
+  text-transform: none;
+
+  :hover {
+    background-color: ${({ theme: { palette } }) => palette.primaryDeep};
+  }
+`;
+
+const ElementButton = React.memo(({ type, elementConfig }) => {
+    const { attributes } = useWidgetContext(type);
+    const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
+    const link = attribute?.value;
+    if (!link || typeof link !== "string")
+        return null;
+    return (jsxRuntime.jsx(ImageContainerButton, { onClick: () => window.open(attribute?.value), children: elementConfig.value || "" }));
+});
+
+const AttributeGalleryContainer = styled.div `
+  && {
+    width: calc(100% + 3rem);
+  }
+
+  min-height: 12.625rem;
+  background-color: ${({ theme: { palette } }) => palette.element};
+
+  img {
+    width: 100%;
+  }
+`;
+const LinearProgressContainer = styled(uilibGl.Flex) `
+  align-items: center;
+  justify-content: center;
+  min-height: inherit;
+
+  ${uilibGl.LinearProgress} {
+    max-width: 4rem;
+  }
+`;
+const NoLiveSnapshotContainer = styled(uilibGl.Flex) `
+  flex-direction: column;
+  align-items: center;
+
+  span[kind="alert"] {
+    width: 2rem;
+    height: 2rem;
+
+    &:after {
+      font-size: 2rem;
+      color: ${({ theme: { palette } }) => palette.elementDeep};
+    }
+  }
+
+  ${uilibGl.Description} {
+    font-size: 0.75rem;
+    color: ${({ theme: { palette } }) => palette.textDisabled};
+  }
+`;
+const SmallPreviewControl = styled(uilibGl.IconButton) `
+  cursor: ${({ $isDisabled }) => ($isDisabled ? "default" : "pointer")};
+  z-index: 3;
+  position: absolute;
+  top: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-top: -1.25rem;
+  background-color: rgba(61, 61, 61, 0.8);
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.smallest};
+
+  span:after {
+    color: ${({ $isDisabled }) => ($isDisabled ? "rgba(255, 255, 255, 0.28)" : "rgba(255, 255, 255, 1)")};
+    transition: color ${uilibGl.transition.hover};
+  }
+`;
+const SmallPreviewCounter = styled(uilibGl.Flex) `
+  z-index: 3;
+  position: absolute;
+  bottom: 0.625rem;
+  left: 0;
+  width: 100%;
+  height: 1rem;
+  justify-content: center;
 
   > div {
     background-color: rgba(61, 61, 61, 0.8);
@@ -6651,7 +6987,7 @@ const imgSlideShowMixin = styled.css `
     }
   }
 `;
-const SmallPreviewContainer = styled.div `
+const SmallPreviewContainer$1 = styled.div `
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
   position: relative;
   width: 100%;
@@ -6669,230 +7005,61 @@ const SmallPreviewContainer = styled.div `
     transition: opacity ${uilibGl.transition.hover};
   }
 
-  &:hover {
-    ${SmallPreviewControl}, ${SmallPreviewCounter} {
-      opacity: 1;
-    }
-  }
-
-  img {
-    z-index: 0;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    min-height: inherit;
-    object-position: center;
-    object-fit: cover;
-
-    &:nth-child(${({ currentIndex }) => currentIndex}) {
-      z-index: 1;
-    }
-
-    ${({ prevIndex, currentIndex }) => prevIndex !== currentIndex && imgSlideShowMixin}
-  }
-`;
-const SmallPreviewImages = styled.div ``;
-
-const SmallPreview = ({ images, totalCount, currentIndex, isLoading, setCurrentIndex, onClick, onNextPage }) => {
-    const { t } = useGlobalContext();
-    const [prevIndex, setPrevIndex] = react.useState(currentIndex + 1);
-    const isPrevDisabled = currentIndex === 0;
-    const total = totalCount || images?.length || 0;
-    const isNextDisabled = currentIndex === total - 1;
-    const prev = react.useCallback(() => {
-        if (isPrevDisabled)
-            return;
-        setPrevIndex(currentIndex);
-        setCurrentIndex(currentIndex - 1);
-    }, [currentIndex, isPrevDisabled, setCurrentIndex]);
-    const next = react.useCallback(() => {
-        if (isNextDisabled)
-            return;
-        setPrevIndex(currentIndex);
-        setCurrentIndex(currentIndex + 1);
-        if (currentIndex === images.length) {
-            onNextPage();
-        }
-    }, [currentIndex, images, isNextDisabled, onNextPage, setCurrentIndex]);
-    return (jsxRuntime.jsxs(SmallPreviewContainer, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsxRuntime.jsx(uilibGl.LinearProgress, {}), images.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsxRuntime.jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsxRuntime.jsx(SmallPreviewCounter, { children: jsxRuntime.jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard" }), " ", total] }) })] })), jsxRuntime.jsx(SmallPreviewImages, { onClick: onClick, children: images.map(image => (jsxRuntime.jsx("img", { src: image.src, alt: "" }, image.src))) })] }));
-};
-
-const ElementSlideshow = ({ elementConfig, type, renderElement }) => {
-    const { expandedContainers, dataSources, attributes } = useWidgetContext(type);
-    const [currentIndex, setCurrentIndex] = react.useState(0);
-    const [isOpenGallery, toggleGallery] = useToggle();
-    const { id, options, attributeName } = elementConfig || {};
-    const { expandable, expanded, relatedDataSource } = options || {};
-    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const images = react.useMemo(() => {
-        const dataSource = relatedDataSource ? dataSources?.find(({ name }) => name === relatedDataSource) : null;
-        const array = dataSource
-            ? dataSource.features.map(feature => feature.attributes[attributeName])
-            : getSlideshowImages({
-                element: elementConfig,
-                attribute: attributes.find(({ name }) => name === attributeName),
-            });
-        return (array?.map(image => ({
-            src: image,
-            fileName: image,
-        })) || []);
-    }, [attributeName, attributes, dataSources, elementConfig, relatedDataSource]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(SmallPreviewContainer$1, { children: [jsxRuntime.jsx(SmallPreview, { images: images, currentIndex: currentIndex, setCurrentIndex: setCurrentIndex, onClick: toggleGallery }), isOpenGallery && (jsxRuntime.jsx(uilibGl.Preview, { images: images, 
-                        // currentIndex={currentIndex}
-                        // totalCount={images.length}
-                        isOpen: isOpenGallery, onClose: toggleGallery }))] }))] }));
-};
-
-const ElementSvg = react.memo(({ type, elementConfig }) => {
-    const { layerInfo, attributes } = useWidgetContext(type);
-    const { options } = elementConfig || {};
-    const { width, height, fontColor } = options || {};
-    return (jsxRuntime.jsx(SvgImage, { url: getSvgUrl({ elementConfig, layerInfo, attributes }), width: width, height: height, fontColor: fontColor }));
-});
-
-const StyledIconFontSizeMixin = styled.css `
-  height: ${({ fontSize }) => `${fontSize}px`};
-
-  &&:after {
-    font-size: ${({ fontSize }) => `${fontSize}px`};
-  }
-`;
-const StyledIconFontColorMixin = styled.css `
-  &&:after {
-    color: ${({ fontColor }) => fontColor};
-  }
-`;
-const StyledIcon = styled(uilibGl.Icon) `
-  ${({ fontSize }) => !!fontSize && StyledIconFontSizeMixin};
-  ${({ fontColor }) => !!fontColor && StyledIconFontColorMixin};
-`;
-
-const ElementIcon = react.memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const { value, attributeName, options } = elementConfig || {};
-    const { fontSize, fontColor } = options || {};
-    const iconValue = react.useMemo(() => (attributeName ? attributes.find(item => item.name === attributeName)?.value : value), [attributeName, attributes, value]);
-    return jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor });
-});
-
-const TooltipIcon = styled(uilibGl.Icon) `
-  &&& {
-    :after {
-      font-size: 0.75rem;
-      color: ${({ theme: { palette } }) => palette.iconDisabled};
-      transition: color ${uilibGl.transition.hover};
-    }
-
-    :hover:after {
-      color: ${({ theme: { palette } }) => palette.icon};
-    }
-  }
-`;
-
-const ElementTooltip = react.memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const { attributeName, options } = elementConfig || {};
-    const { icon } = options || {};
-    const attribute = getAttributeByName(attributeName, attributes);
-    const text = (attribute?.value || elementConfig?.value);
-    return text ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: text, children: ref => jsxRuntime.jsx(TooltipIcon, { kind: icon || "question", ref: ref }) })) : null;
-});
-
-const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
-    kind: "external_link",
-})) `
-  ${uilibGl.Icon} {
-    color: ${({ theme: { palette } }) => palette.primary};
-  }
-
-  &:hover ${uilibGl.Icon} {
-    color: ${({ theme: { palette } }) => palette.primaryDeep};
-  }
-`;
-const LocalLinkBlank = styled(uilibGl.Blank) `
-  min-width: 13.5rem;
-  padding: 0.5rem 0.75rem 0;
-
-  a {
-    text-decoration: none;
-    font-size: 0.75rem;
-    color: ${({ theme: { palette } }) => palette.primary};
-  }
-
-  ${uilibGl.IconButtonButton} {
-    font-size: 0.75rem;
+  &:hover {
+    ${SmallPreviewControl}, ${SmallPreviewCounter} {
+      opacity: 1;
+    }
   }
-`;
-const LocalLinkButton = styled(uilibGl.IconButton).attrs(() => ({
-    kind: "link",
-})) `
-  width: 1rem;
-  height: 1rem;
-  background-color: ${({ theme: { palette } }) => palette.primary};
-  border-radius: 50%;
 
-  span[kind] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  img {
+    z-index: 0;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    object-position: center;
+    object-fit: cover;
 
-    :after {
-      position: relative;
-      font-size: 0.6rem;
-      color: white;
+    &:nth-child(${({ currentIndex }) => currentIndex}) {
+      z-index: 1;
     }
-  }
-`;
-const LocalLinkCopy = styled(uilibGl.Flex) `
-  justify-content: center;
-`;
-
-const LocalLink = react.memo(({ link }) => {
-    const { t } = useGlobalContext();
-    const [isOpen, toggleOpen] = useToggle();
-    const onCopy = react.useCallback(() => {
-        navigator.clipboard.writeText(link);
-        toggleOpen();
-    }, [link, toggleOpen]);
-    return (jsxRuntime.jsx(uilibGl.Popover, { open: isOpen, zIndex: 10, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsxRuntime.jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxRuntime.jsxs(LocalLinkBlank, { children: [jsxRuntime.jsx("a", { href: link, target: "_blank", rel: "noreferrer", children: link }), jsxRuntime.jsx(LocalLinkCopy, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard" }) }) })] }) }));
-});
-
-const ElementLink = react.memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
-    const link = attribute?.value;
-    if (!link || typeof link !== "string")
-        return null;
-    return link.startsWith("http") ? jsxRuntime.jsx(ExternalLink, { onClick: () => window.open(link) }) : jsxRuntime.jsx(LocalLink, { link: link });
-});
-
-const ImageContainerButton = styled(uilibGl.FlatButton) `
-  min-height: 1.5rem;
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
-  background-color: ${({ theme: { palette } }) => palette.primary};
-  text-transform: none;
 
-  :hover {
-    background-color: ${({ theme: { palette } }) => palette.primaryDeep};
+    ${({ prevIndex, currentIndex }) => prevIndex !== currentIndex && imgSlideShowMixin}
   }
 `;
-
-const ElementButton = react.memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
-    const link = attribute?.value;
-    if (!link || typeof link !== "string")
-        return null;
-    return (jsxRuntime.jsx(ImageContainerButton, { onClick: () => window.open(attribute?.value), children: elementConfig.value || "" }));
-});
+const SmallPreviewImages = styled.div ``;
 
 const NoLiveSnapshot = () => {
     return (jsxRuntime.jsxs(NoLiveSnapshotContainer, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }), jsxRuntime.jsx(uilibGl.Description, { children: "\u0421\u043D\u0438\u043C\u043E\u043A \u043D\u0435 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D" })] }));
 };
 
+const SmallPreview = ({ images, totalCount, currentIndex, isLoading, setCurrentIndex, onClick, onNextPage }) => {
+    const { t } = useGlobalContext();
+    const [prevIndex, setPrevIndex] = React.useState(currentIndex + 1);
+    const isPrevDisabled = currentIndex === 0;
+    const total = totalCount || images?.length || 0;
+    const isNextDisabled = currentIndex === total - 1;
+    const prev = React.useCallback(() => {
+        if (isPrevDisabled)
+            return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex(currentIndex - 1);
+    }, [currentIndex, isPrevDisabled, setCurrentIndex]);
+    const next = React.useCallback(() => {
+        if (isNextDisabled)
+            return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex(currentIndex + 1);
+        if (currentIndex === images.length) {
+            onNextPage();
+        }
+    }, [currentIndex, images, isNextDisabled, onNextPage, setCurrentIndex]);
+    return (jsxRuntime.jsxs(SmallPreviewContainer$1, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsxRuntime.jsx(uilibGl.LinearProgress, {}), images.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsxRuntime.jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsxRuntime.jsx(SmallPreviewCounter, { children: jsxRuntime.jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard" }), " ", total] }) })] })), jsxRuntime.jsx(SmallPreviewImages, { onClick: onClick, children: images.map(image => (jsxRuntime.jsx("img", { src: image.src, alt: "" }, image.src))) })] }));
+};
+
 const DEFAULT_ARCHIVED_PERIOD = "#24h";
 const SNAPSHOTS_PER_PAGE = 10;
 const getDuration = (archivePeriod) => {
@@ -6913,20 +7080,20 @@ const getDuration = (archivePeriod) => {
 };
 const useCameraAttribute = (cameraId) => {
     const { api } = useGlobalContext();
-    const [currentIndex, setCurrentIndex] = react.useState(0);
-    const [currentPage, setCurrentPage] = react.useState(0);
-    const [timeline, setTimeline] = react.useState([]);
-    const [isLoadingSnapshot, setLoadingSnapshot] = react.useState(false);
-    const [isLoadingTimeline, setLoadingTimeline] = react.useState(false);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [timeline, setTimeline] = React.useState([]);
+    const [isLoadingSnapshot, setLoadingSnapshot] = React.useState(false);
+    const [isLoadingTimeline, setLoadingTimeline] = React.useState(false);
     const [isOpenGallery, toggleGallery] = useToggle();
-    const [galleryImages, setGalleryImages] = react.useState([]);
-    const imagesRef = react.useRef([]);
+    const [galleryImages, setGalleryImages] = React.useState([]);
+    const imagesRef = React.useRef([]);
     // Todo get archivePeriod from project configuration
     const archivePeriod = /* appConfig?.settings?.cameraAttribute?.archivePeriod ||*/ DEFAULT_ARCHIVED_PERIOD;
-    const onNextPage = react.useCallback(() => {
+    const onNextPage = React.useCallback(() => {
         setCurrentPage(currentPage + 1);
     }, [currentPage]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         (async () => {
             if (!cameraId)
                 return;
@@ -6957,7 +7124,7 @@ const useCameraAttribute = (cameraId) => {
             setTimeline(timelineResponse.timeline);
         })();
     }, [cameraId]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!timeline.length)
             return;
         const timelinePage = timeline.slice(currentPage * SNAPSHOTS_PER_PAGE, (currentPage + 1) * SNAPSHOTS_PER_PAGE);
@@ -7023,44 +7190,421 @@ const ElementCamera = ({ type, renderElement, elementConfig, field }) => {
                         onClose: toggleGallery }))] }))] }));
 };
 
-const ElementChart = react.memo(({ type, elementConfig, renderElement }) => {
-    const { config } = useWidgetConfig(type);
-    return (jsxRuntime.jsx(Chart, { type: type, config: config, elementConfig: elementConfig, element: elementConfig, renderElement: renderElement }));
-});
-
-const ElementLegend = react.memo(({ type, element, elementConfig, expandedContainers }) => {
-    const { attributes } = useWidgetContext(type);
+const ElementChart = React.memo(({ type, elementConfig, renderElement }) => {
+    const { config } = useWidgetConfig(type);
+    return (jsxRuntime.jsx(Chart, { type: type, config: config, elementConfig: elementConfig, element: elementConfig, renderElement: renderElement }));
+});
+
+const ElementChips = React.memo(({ type, elementConfig }) => {
+    const { attributes } = useWidgetContext(type);
+    const { attributeName, options, style } = elementConfig || {};
+    const { separator, bgColor, fontColor, fontSize } = options || {};
+    const attribute = getAttributeByName(attributeName, attributes);
+    const tags = attribute?.value?.split(separator || ",");
+    return (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsxRuntime.jsx(DashboardChip$1, { text: tag, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": true }, tag))) }));
+});
+
+const StyledIconFontSizeMixin = styled.css `
+  height: ${({ fontSize }) => `${fontSize}px`};
+
+  &&:after {
+    font-size: ${({ fontSize }) => `${fontSize}px`};
+  }
+`;
+const StyledIconFontColorMixin = styled.css `
+  &&:after {
+    color: ${({ fontColor }) => fontColor};
+  }
+`;
+const StyledIcon = styled(uilibGl.Icon) `
+  ${({ fontSize }) => !!fontSize && StyledIconFontSizeMixin};
+  ${({ fontColor }) => !!fontColor && StyledIconFontColorMixin};
+`;
+
+const ElementIcon = React.memo(({ type, elementConfig }) => {
+    const { attributes } = useWidgetContext(type);
+    const { value, attributeName, options } = elementConfig || {};
+    const { fontSize, fontColor } = options || {};
+    const iconValue = React.useMemo(() => (attributeName ? attributes?.find(item => item.name === attributeName)?.value : value), [attributeName, attributes, value]);
+    return jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor });
+});
+
+const ElementImage = React.memo(({ type, elementConfig }) => {
+    const { attributes } = useWidgetContext(type);
+    const { value, attributeName, options } = elementConfig || {};
+    const { width } = options || {};
+    const firstImage = React.useMemo(() => {
+        if (value) {
+            return value.toString();
+        }
+        if (!attributeName || Array.isArray(attributeName)) {
+            return null;
+        }
+        const attribute = attributes?.find(item => item.name === attributeName);
+        return attribute?.value?.split(";")?.[0];
+    }, [attributeName, attributes, value]);
+    return firstImage ? jsxRuntime.jsx("img", { src: firstImage, alt: firstImage, width: width }) : null;
+});
+
+const ElementLegend = React.memo(({ type, element, elementConfig, expandedContainers }) => {
+    const { attributes } = useWidgetContext(type);
+    const { options } = elementConfig || {};
+    const { twoColumns, chartId, relatedDataSources } = options || {};
+    const chartElement = React.useMemo(() => findAnd.returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
+    const { data, loading } = useChartData({
+        element: chartElement,
+        type,
+    });
+    const legendData = React.useMemo(() => {
+        if (!data[0]?.items?.length)
+            return [];
+        const relatedAttributes = relatedDataSources || [];
+        const isRelated = !!relatedAttributes?.length;
+        return isRelated
+            ? data[0].items
+            : data[0].items.map(item => {
+                const attribute = attributes?.find(({ name }) => name === item.name);
+                return { ...item, name: attribute?.alias || item.name };
+            });
+    }, [attributes, data, relatedDataSources]);
+    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, type: type })) : null;
+});
+
+const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
+    kind: "external_link",
+})) `
+  ${uilibGl.Icon} {
+    color: ${({ theme: { palette } }) => palette.primary};
+  }
+
+  &:hover ${uilibGl.Icon} {
+    color: ${({ theme: { palette } }) => palette.primaryDeep};
+  }
+`;
+const LocalLinkBlank = styled(uilibGl.Blank) `
+  min-width: 13.5rem;
+  padding: 0.5rem 0.75rem 0;
+
+  a {
+    text-decoration: none;
+    font-size: 0.75rem;
+    color: ${({ theme: { palette } }) => palette.primary};
+  }
+
+  ${uilibGl.IconButtonButton} {
+    font-size: 0.75rem;
+  }
+`;
+const LocalLinkButton = styled(uilibGl.IconButton).attrs(() => ({
+    kind: "link",
+})) `
+  width: 1rem;
+  height: 1rem;
+  background-color: ${({ theme: { palette } }) => palette.primary};
+  border-radius: 50%;
+
+  span[kind] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :after {
+      position: relative;
+      font-size: 0.6rem;
+      color: white;
+    }
+  }
+`;
+const LocalLinkCopy = styled(uilibGl.Flex) `
+  justify-content: center;
+`;
+
+const LocalLink = React.memo(({ link }) => {
+    const { t } = useGlobalContext();
+    const [isOpen, toggleOpen] = useToggle();
+    const onCopy = React.useCallback(() => {
+        navigator.clipboard.writeText(link);
+        toggleOpen();
+    }, [link, toggleOpen]);
+    return (jsxRuntime.jsx(uilibGl.Popover, { open: isOpen, zIndex: 10, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsxRuntime.jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxRuntime.jsxs(LocalLinkBlank, { children: [jsxRuntime.jsx("a", { href: link, target: "_blank", rel: "noreferrer", children: link }), jsxRuntime.jsx(LocalLinkCopy, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard" }) }) })] }) }));
+});
+
+const ElementLink = React.memo(({ type, elementConfig }) => {
+    const { attributes } = useWidgetContext(type);
+    const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
+    const link = attribute?.value;
+    if (!link || typeof link !== "string")
+        return null;
+    return link.startsWith("http") ? jsxRuntime.jsx(ExternalLink, { onClick: () => window.open(link) }) : jsxRuntime.jsx(LocalLink, { link: link });
+});
+
+const SmallPreviewContainer = styled.div `
+  width: 100%;
+  height: 100%;
+`;
+
+const ElementSlideshow = ({ elementConfig, type, renderElement }) => {
+    const { expandedContainers, dataSources, attributes } = useWidgetContext(type);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [isOpenGallery, toggleGallery] = useToggle();
+    const { id, options, attributeName } = elementConfig || {};
+    const { expandable, expanded, relatedDataSource } = options || {};
+    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
+    const images = React.useMemo(() => {
+        const dataSource = relatedDataSource ? dataSources?.find(({ name }) => name === relatedDataSource) : null;
+        const array = dataSource
+            ? dataSource.features.map(feature => feature.attributes[attributeName])
+            : getSlideshowImages({
+                element: elementConfig,
+                attribute: attributes?.find(({ name }) => name === attributeName),
+            });
+        return (array?.map(image => ({
+            src: image,
+            fileName: image,
+        })) || []);
+    }, [attributeName, attributes, dataSources, elementConfig, relatedDataSource]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(SmallPreviewContainer, { children: [jsxRuntime.jsx(SmallPreview, { images: images, currentIndex: currentIndex, setCurrentIndex: setCurrentIndex, onClick: toggleGallery }), isOpenGallery && (jsxRuntime.jsx(uilibGl.Preview, { images: images, 
+                        // currentIndex={currentIndex}
+                        // totalCount={images.length}
+                        isOpen: isOpenGallery, onClose: toggleGallery }))] }))] }));
+};
+
+const ElementSvg = React.memo(({ type, elementConfig }) => {
+    const { layerInfo, attributes } = useWidgetContext(type);
     const { options } = elementConfig || {};
-    const { twoColumns, chartId, relatedDataSources } = options || {};
-    const chartElement = react.useMemo(() => findAnd.returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
-    const { data, loading } = useChartData({
-        element: chartElement,
-        type,
-    });
-    const legendData = react.useMemo(() => {
-        if (!data[0]?.items?.length)
-            return [];
-        const relatedAttributes = relatedDataSources || [];
-        const isRelated = !!relatedAttributes?.length;
-        return isRelated
-            ? data[0].items
-            : data[0].items.map(item => {
-                const attribute = attributes?.find(({ name }) => name === item.name);
-                return { ...item, name: attribute?.alias || item.name };
-            });
-    }, [attributes, data, relatedDataSources]);
-    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, type: type })) : null;
+    const { width, height, fontColor } = options || {};
+    return (jsxRuntime.jsx(SvgImage, { url: getSvgUrl({ elementConfig, layerInfo, attributes }), width: width, height: height, fontColor: fontColor }));
 });
 
-const ElementChips = react.memo(({ type, elementConfig }) => {
+const TooltipIcon = styled(uilibGl.Icon) `
+  &&& {
+    :after {
+      font-size: 0.75rem;
+      color: ${({ theme: { palette } }) => palette.iconDisabled};
+      transition: color ${uilibGl.transition.hover};
+    }
+
+    :hover:after {
+      color: ${({ theme: { palette } }) => palette.icon};
+    }
+  }
+`;
+
+const ElementTooltip = React.memo(({ type, elementConfig }) => {
     const { attributes } = useWidgetContext(type);
-    const { attributeName, options, style } = elementConfig || {};
-    const { separator, bgColor, fontColor, fontSize } = options || {};
+    const { attributeName, options } = elementConfig || {};
+    const { icon } = options || {};
     const attribute = getAttributeByName(attributeName, attributes);
-    const tags = attribute?.value?.split(separator || ",");
-    return (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsxRuntime.jsx(DashboardChip$1, { text: tag, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": true }, tag))) }));
+    const text = (attribute?.value || elementConfig?.value);
+    return text ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: text, children: ref => jsxRuntime.jsx(TooltipIcon, { kind: icon || "question", ref: ref }) })) : null;
 });
 
+const SlideshowHeaderWrapper = styled.div `
+  padding: ${({ withPadding }) => (withPadding ? "0.5rem 0.5rem 0" : 0)};
+
+  ${Header} {
+    align-items: flex-start;
+    width: calc(100% + 2rem);
+    height: ${({ big }) => (big ? "15.5rem" : "auto")};
+    padding: 1.5rem;
+    margin: -1rem -1rem 0 -1rem;
+    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
+
+    ${SmallPreviewCounter} {
+      bottom: ${({ withPadding }) => (withPadding ? 0.625 : 1.125)}rem;
+    }
+
+    :before,
+    :after {
+      content: "";
+      z-index: 2;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+
+    :before {
+      height: 100%;
+      background: rgba(32, 46, 53, 0.25);
+    }
+
+    :after {
+      height: 4.5rem;
+      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+    }
+
+    :hover {
+      ${SmallPreviewControl}, ${SmallPreviewCounter} {
+        opacity: 1;
+      }
+    }
+  }
+`;
+const ImageContainerBg = styled.div `
+  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 `
+  position: absolute;
+  top: 0;
+  bottom: ${({ height }) => (height ? `${height}px` : 0)};
+  left: 0;
+  right: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    object-position: center;
+    object-fit: cover;
+  }
+`;
+
+const FeatureCardSlideshowHeader = ({ isRow }) => {
+    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const { header, options } = config || {};
+    const renderElement = useHeaderRender(header);
+    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: options?.withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), 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(HeaderSlideshow, { height: options?.height, children: renderElement({
+                            id: "slideshow",
+                            wrap: false,
+                        }) })] }) }) }));
+};
+
+const getDashboardHeader = (templateName) => {
+    switch (templateName) {
+        case exports.HeaderTemplate.Default:
+        default:
+            return DashboardDefaultHeader;
+    }
+};
+
+const getDataFromAttributes = (t, config, attributes) => {
+    const colors = config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS;
+    const data = config?.children?.map(({ attributeName }, index) => {
+        const attribute = attributes?.find(({ name }) => name === attributeName);
+        return {
+            name: attribute?.name || "",
+            value: attribute ? Number(attribute.value) : 0,
+            color: colors[index] || FEATURE_CARD_OTHER_COLOR
+        };
+    });
+    if (config?.options?.orderByValue) {
+        data.sort((a, b) => b.value - a.value);
+    }
+    const isOtherSliced = config?.options?.otherItems && config.options.otherItems < data.length;
+    if (!isOtherSliced)
+        return data;
+    const otherValue = data
+        .slice(0, config?.options?.otherItems)
+        .reduce((prev, { value }) => prev + value, 0);
+    return [
+        ...data?.slice(0, config.options?.otherItems),
+        {
+            name: t("other", { ns: "dashboard" }),
+            color: FEATURE_CARD_OTHER_COLOR,
+            value: Number(otherValue)
+        }
+    ];
+};
+
+const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSource, layerInfo }) => {
+    if (!dataSource || !dataSource?.features?.length) {
+        return [];
+    }
+    const { colors } = config.options;
+    const layerDefinition = getLayerDefinition(layerInfo);
+    let data = JSON.parse(JSON.stringify(dataSource?.features));
+    const sortAttribute = config?.options?.orderByValue
+        ? relatedConfig.attributeName
+        : config?.options?.orderByTitle
+            ? relatedConfig.attributeTitle
+            : null;
+    if (sortAttribute) {
+        data.sort((a, b) => b.attributes[sortAttribute] - a.attributes[sortAttribute]);
+    }
+    const isOtherSliced = config?.options?.otherItems && config.options.otherItems < data.length;
+    const otherValue = isOtherSliced
+        ? data
+            .slice(config.options.otherItems)
+            .reduce((prev, { attributes }) => prev + attributes[relatedConfig.attributeName], 0)
+        : null;
+    if (isOtherSliced) {
+        data = data.slice(0, config?.options?.otherItems);
+    }
+    const gradientArray = relatedConfig.chartAxis && colors?.length < data.length
+        ? new Gradient()
+            .setColorGradient(colors[0], colors[colors.length - 1])
+            .setMidpoint(data.length)
+            .getColors()
+        : colors;
+    const filter = getConfigFilter(relatedConfig?.filterName, filters);
+    const result = data.reduce((acc, feature, index) => {
+        if (relatedConfig?.filterName && !filter) {
+            return acc;
+        }
+        const attributeName = feature.attributes[relatedConfig.attributeName];
+        const attributeTitle = feature.attributes[relatedConfig.attributeTitle];
+        const attributeColor = feature.attributes[relatedConfig.attributeColor];
+        return [
+            ...acc,
+            {
+                name: formatAttributeValue({
+                    t,
+                    type: layerDefinition.attributes[relatedConfig.attributeTitle]?.type,
+                    value: attributeTitle,
+                    stringFormat: layerDefinition.attributes[relatedConfig.attributeTitle]?.stringFormat
+                }),
+                value: attributeName === null ? null : Number(attributeName),
+                color: attributeColor || gradientArray?.[index] || FEATURE_CARD_OTHER_COLOR,
+                min: filter?.attributeMin ? feature.attributes[filter.attributeMin] : null,
+                max: filter?.attributeMin ? feature.attributes[filter.attributeMax] : null
+            }
+        ];
+    }, []);
+    if (isOtherSliced) {
+        result.push({
+            name: t("other", { ns: "dashboard" }),
+            color: FEATURE_CARD_OTHER_COLOR,
+            value: Number(otherValue)
+        });
+    }
+    return result;
+};
+
+const getDefaultConfig = ({ title, defaultTitle, items, baseMapName, position, resolution, srid, }) => {
+    const dashboardConfiguration = JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_CONFIG));
+    const defaultPages = JSON.parse(JSON.stringify(DEFAULT_PAGES_CONFIG));
+    const defaultPage = createConfigPage({ title, baseMapName, position, resolution, defaultTitle });
+    if (items?.length) {
+        const contentItems = items.map(item => createConfigLayer(item.name));
+        defaultPage.layers.push(...contentItems);
+    }
+    defaultPages.children.push(defaultPage);
+    dashboardConfiguration.children.push(defaultPages);
+    return dashboardConfiguration;
+};
+
 const elementComponents = {
     image: ElementImage,
     slideshow: ElementSlideshow,
@@ -7152,6 +7696,20 @@ function getFeatureAttributes(feature = {}, layer, dataSource) {
     });
 }
 
+const getFeatureCardHeader = (templateName) => {
+    switch (templateName) {
+        case exports.HeaderTemplate.Slideshow:
+            return FeatureCardSlideshowHeader;
+        case exports.HeaderTemplate.Gradient:
+            return FeatureCardGradientHeader;
+        case exports.HeaderTemplate.Icon:
+            return FeatureCardIconHeader;
+        case exports.HeaderTemplate.Default:
+        default:
+            return FeatureCardDefaultHeader;
+    }
+};
+
 const RangeNumberFilter = ({ type, filter }) => {
     const { t } = useGlobalContext();
     const { filters, changeFilters } = useWidgetContext(type);
@@ -7160,8 +7718,8 @@ const RangeNumberFilter = ({ type, filter }) => {
     const { filters: configFilters } = currentPage;
     const { filterName, width, step, label, minValue = RANGE_MIN_VALUE, maxValue = RANGE_MAX_VALUE } = filter.options;
     const filterValue = [filters[filterName]?.min || minValue, filters[filterName]?.max || maxValue];
-    const [value, setValue] = react.useState(filterValue);
-    react.useEffect(() => {
+    const [value, setValue] = React.useState(filterValue);
+    React.useEffect(() => {
         updateDebounce(() => {
             changeFilters({
                 [filterName]: {
@@ -7180,8 +7738,8 @@ const RangeNumberFilter = ({ type, filter }) => {
 
 const TextFilter = ({ type, filter, config }) => {
     const { filters, changeFilters, dataSources } = useWidgetContext(type);
-    const suggestRef = react.useRef(null);
-    const [totalCount, setTotalCount] = react.useState(0);
+    const suggestRef = React.useRef(null);
+    const [totalCount, setTotalCount] = React.useState(0);
     const { attributes, layerInfo } = useRelatedDataSourceAttributes({
         type,
         elementConfig: filter,
@@ -7191,10 +7749,10 @@ const TextFilter = ({ type, filter, config }) => {
     const { filterName, searchFilterName, placeholder, width, height, multiSelect, variants } = filter.options;
     const { eqlParameters } = (layerInfo?.configuration || {});
     const layerParams = useLayerParams(layerInfo);
-    const [value, setValue] = react.useState("");
-    const configFilter = react.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
-    const searchFilter = react.useMemo(() => getConfigFilter(searchFilterName, configFilters), [configFilters, searchFilterName]);
-    const searchDataSource = react.useMemo(() => !!searchFilter?.relatedDataSource &&
+    const [value, setValue] = React.useState("");
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
+    const searchFilter = React.useMemo(() => getConfigFilter(searchFilterName, configFilters), [configFilters, searchFilterName]);
+    const searchDataSource = React.useMemo(() => !!searchFilter?.relatedDataSource &&
         configDataSources.find(({ name }) => name === searchFilter.relatedDataSource), [configDataSources, searchFilter?.relatedDataSource]);
     const updateDataSource = useUpdateDataSource({
         dataSource: searchDataSource,
@@ -7204,15 +7762,15 @@ const TextFilter = ({ type, filter, config }) => {
         layerParams,
         eqlParameters,
     });
-    const [options, setOptions] = react.useState([]);
-    const setFilterValue = react.useCallback(newValue => {
+    const [options, setOptions] = React.useState([]);
+    const setFilterValue = React.useCallback(newValue => {
         changeFilters({
             [filterName]: {
                 value: newValue,
             },
         }, configFilter?.resetFilters);
     }, [changeFilters, configFilter?.resetFilters, filterName]);
-    const onSelect = react.useCallback((newSelected) => {
+    const onSelect = React.useCallback((newSelected) => {
         const lastSelected = newSelected[newSelected.length - 1];
         setFilterValue(multiSelect
             ? newSelected.map(item => item.value)
@@ -7221,7 +7779,7 @@ const TextFilter = ({ type, filter, config }) => {
                 : []);
         setValue(multiSelect ? "" : lastSelected?.text || "");
     }, [multiSelect, setFilterValue]);
-    const onBlur = react.useCallback(() => {
+    const onBlur = React.useCallback(() => {
         if (variants) {
             setFilterValue([value]);
         }
@@ -7229,7 +7787,7 @@ const TextFilter = ({ type, filter, config }) => {
             setOptions([]);
         }
     }, [variants, setFilterValue, value]);
-    const onKeyUp = react.useCallback(e => {
+    const onKeyUp = React.useCallback(e => {
         if (e.key === "Enter") {
             setFilterValue([value]);
         }
@@ -7248,7 +7806,7 @@ const TextFilter = ({ type, filter, config }) => {
             }));
         },
     });
-    const search = react.useCallback((searchValue, isLoadNext = false) => {
+    const search = React.useCallback((searchValue, isLoadNext = false) => {
         if (variants || !searchFilter?.attributeAlias || !searchFilter?.attributeValue)
             return;
         const newFilter = {
@@ -7270,11 +7828,11 @@ const TextFilter = ({ type, filter, config }) => {
         updateDataSource,
         options.length,
     ]);
-    const infiniteScrollProps = react.useMemo(() => ({
+    const infiniteScrollProps = React.useMemo(() => ({
         loadNext: () => loadNext(() => search(value, true)),
         hasMore: totalCount > options.length,
     }), [totalCount, options.length, loadNext, search, value]);
-    const selected = react.useMemo(() => {
+    const selected = React.useMemo(() => {
         if (!filters[filterName]?.value)
             return [];
         return Array.isArray(filters[filterName].value)
@@ -7306,7 +7864,7 @@ const DropdownFilter = ({ type, filter, elementConfig }) => {
     const { filterName, placeholder, width, noEmptyOption } = filter.options;
     const { sliceItems } = useShownOtherItems(options);
     const configFilter = getConfigFilter(filterName, configFilters);
-    const filterOptions = react.useMemo(() => {
+    const filterOptions = React.useMemo(() => {
         const dataSource = getDataSource(configFilter.relatedDataSource, dataSources);
         const listOptions = getListOptions(sliceItems(dataSource?.features), filterName, configFilters);
         if (noEmptyOption === undefined || noEmptyOption === false) {
@@ -7314,12 +7872,12 @@ const DropdownFilter = ({ type, filter, elementConfig }) => {
         }
         return listOptions;
     }, [configFilter.relatedDataSource, configFilters, dataSources, filterName, noEmptyOption, placeholder, sliceItems]);
-    const value = react.useMemo(() => filters?.[filterName] !== undefined
+    const value = React.useMemo(() => filters?.[filterName] !== undefined
         ? Array.isArray(filters[filterName].value)
             ? null
             : filters[filterName].value
         : getConfigFilter(filterName, configFilters).defaultValue, [configFilters, filterName, filters]);
-    const onChange = react.useCallback((items) => {
+    const onChange = React.useCallback((items) => {
         changeFilters({ [filterName]: items[0] });
     }, [changeFilters, filterName]);
     if (!configFilter)
@@ -7362,7 +7920,7 @@ const ChartLoading = ({ column }) => (jsxRuntime.jsx(uilibGl.Flex, { position: "
 
 const ContainerLoading = () => (jsxRuntime.jsx(uilibGl.Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1.5, mono: true }) }));
 
-const ChartWrapper = react.memo(({ width, height, column, loading, children }) => {
+const ChartWrapper = React.memo(({ width, height, column, loading, children }) => {
     return (jsxRuntime.jsxs(ChartWrapperContainer, { column: column, style: { width, height }, children: [loading && jsxRuntime.jsx(ChartLoading, { column: column }), jsxRuntime.jsx(uilibGl.Flex, { opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: children })] }));
 });
 
@@ -7411,16 +7969,16 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
     const { t } = useGlobalContext();
     const { isLoading, dataSources, filters, changeFilters } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
-    const [selectedPixels, setSelectedPixels] = react.useState(null);
+    const [selectedPixels, setSelectedPixels] = React.useState(null);
     const { filterName } = filter.options;
     const { options } = elementConfig;
     const { barHeight, barWidth = DEFAULT_BAR_WIDTH, padding = DEFAULT_BAR_PADDING, height = DEFAULT_BAR_CHART_HEIGHT, radius = DEFAULT_BARCHART_RADIUS, width: configWidth, markers: configMarkers, colors: configColors, colorAttribute, defaultColor, primaryColor, drawMinMax } = options || {};
     const barFullWidth = barWidth + padding;
     const { filters: configFilters } = currentPage;
-    const configFilter = react.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
     const { relatedDataSource, attributeValue, defaultValue } = configFilter || {};
-    const dataSource = react.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
-    const filterItems = react.useMemo(() => getDataFromRelatedFeatures({
+    const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
+    const filterItems = React.useMemo(() => getDataFromRelatedFeatures({
         t,
         dataSource,
         config: elementConfig,
@@ -7442,32 +8000,32 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
         elementConfig,
         t
     ]);
-    const amount = react.useMemo(() => filterItems?.length || 0, [filterItems?.length]);
-    const width = react.useMemo(() => configWidth || amount * barFullWidth, [amount, barFullWidth, configWidth]);
-    const data = react.useMemo(() => getDataFromFilterItems(filterItems), [filterItems]);
+    const amount = React.useMemo(() => filterItems?.length || 0, [filterItems?.length]);
+    const width = React.useMemo(() => configWidth || amount * barFullWidth, [amount, barFullWidth, configWidth]);
+    const data = React.useMemo(() => getDataFromFilterItems(filterItems), [filterItems]);
     const loading = isLoading && !amount;
     const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, filterItems);
-    const colors = react.useMemo(() => getColorsFromFilterItems(filterItems, defaultColor, formatFilterColor), [defaultColor, filterItems, formatFilterColor]);
-    const selectedRange = react.useMemo(() => getIndexRange(selectedPixels, amount, barFullWidth), [amount, barFullWidth, selectedPixels]);
-    const customXAxis = react.useCallback(xAxis => {
+    const colors = React.useMemo(() => getColorsFromFilterItems(filterItems, defaultColor, formatFilterColor), [defaultColor, filterItems, formatFilterColor]);
+    const selectedRange = React.useMemo(() => getIndexRange(selectedPixels, amount, barFullWidth), [amount, barFullWidth, selectedPixels]);
+    const customXAxis = React.useCallback(xAxis => {
         xAxis.select(".tick:first-of-type").attr("transform", "translate(0, 0)");
         xAxis.select(".tick:last-of-type").attr("transform", `translate(${width}, 0)`);
     }, [width]);
-    const customXAxisBottom = react.useCallback(xAxisBottom => {
+    const customXAxisBottom = React.useCallback(xAxisBottom => {
         xAxisBottom.tickFormat((index) => (drawMinMax === undefined || drawMinMax) && (index === 0 || index === data.length - 1)
             ? data[index].groupName
             : "");
     }, [data, drawMinMax]);
-    const customYAxis = react.useCallback(yAxis => {
+    const customYAxis = React.useCallback(yAxis => {
         yAxis.remove();
     }, []);
-    const customBars = react.useCallback(({ bars }) => {
+    const customBars = React.useCallback(({ bars }) => {
         bars.attr("rx", radius).attr("ry", radius);
     }, [radius]);
-    const tooltipY = react.useMemo(() => (barHeight ? height - barHeight - DEFAULT_BAR_CHART_MARGINS.bottom : undefined), [barHeight, height]);
-    const markers = react.useMemo(() => getChartMarkers(filterItems, configMarkers), [configMarkers, filterItems]);
-    const hasDefinedColors = react.useMemo(() => configColors?.length || colorAttribute, [configColors, colorAttribute]);
-    const marshalledMap = react.useCallback(items => {
+    const tooltipY = React.useMemo(() => (barHeight ? height - barHeight - DEFAULT_BAR_CHART_MARGINS.bottom : undefined), [barHeight, height]);
+    const markers = React.useMemo(() => getChartMarkers(filterItems, configMarkers), [configMarkers, filterItems]);
+    const hasDefinedColors = React.useMemo(() => configColors?.length || colorAttribute, [configColors, colorAttribute]);
+    const marshalledMap = React.useCallback(items => {
         if (hasDefinedColors)
             return undefined;
         return items.map(([item], index) => {
@@ -7481,22 +8039,22 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
             ];
         });
     }, [defaultColor, hasDefinedColors, primaryColor, selectedRange, theme.palette.elementDeep, theme.palette.primary]);
-    const minValue = react.useMemo(() => getMinValueFromFilterItems(filterItems), [filterItems]);
-    const onBarClick = react.useCallback((group) => {
+    const minValue = React.useMemo(() => getMinValueFromFilterItems(filterItems), [filterItems]);
+    const onBarClick = React.useCallback((group) => {
         if (loading)
             return;
         setSelectedPixels([group.groupIndex * barFullWidth, group.groupIndex * barFullWidth]);
         const feature = filterItems.find(({ value }) => value === group.value);
         onFilter(feature.name);
     }, [barFullWidth, filterItems, loading, onFilter]);
-    const getValueRange = react.useCallback((pixelRange) => {
+    const getValueRange = React.useCallback((pixelRange) => {
         const currentRange = pixelRange || selectedPixels;
         const indexRange = getIndexRange(currentRange, filterItems?.length, barFullWidth);
         if (!indexRange || lodash.isNil(filterItems[indexRange[0]]) || lodash.isNil(filterItems[indexRange[1]]))
             return null;
         return [filterItems[indexRange[0]].name, filterItems[indexRange[1]].name];
     }, [barFullWidth, filterItems, selectedPixels]);
-    const onSelect = react.useCallback((pixelRange) => {
+    const onSelect = React.useCallback((pixelRange) => {
         const valueRange = getValueRange(pixelRange);
         if (!valueRange)
             return;
@@ -7509,25 +8067,25 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
             }
         }, configFilter?.resetFilters);
     }, [changeFilters, configFilter?.resetFilters, filterName, getValueRange]);
-    const prevDisabled = react.useMemo(() => loading || !selectedPixels || selectedPixels?.[0] - barFullWidth < 0, [barFullWidth, loading, selectedPixels]);
-    const nextDisabled = react.useMemo(() => loading || !selectedPixels || selectedPixels?.[1] + barFullWidth >= width, [barFullWidth, loading, selectedPixels, width]);
-    const onPrev = react.useCallback(() => {
+    const prevDisabled = React.useMemo(() => loading || !selectedPixels || selectedPixels?.[0] - barFullWidth < 0, [barFullWidth, loading, selectedPixels]);
+    const nextDisabled = React.useMemo(() => loading || !selectedPixels || selectedPixels?.[1] + barFullWidth >= width, [barFullWidth, loading, selectedPixels, width]);
+    const onPrev = React.useCallback(() => {
         if (prevDisabled)
             return;
         onSelect([selectedPixels[0] - barFullWidth, selectedPixels[1] - barFullWidth]);
     }, [barFullWidth, prevDisabled, onSelect, selectedPixels]);
-    const onNext = react.useCallback(() => {
+    const onNext = React.useCallback(() => {
         if (nextDisabled)
             return;
         onSelect([selectedPixels[0] + barFullWidth, selectedPixels[1] + barFullWidth]);
     }, [barFullWidth, nextDisabled, onSelect, selectedPixels]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (selectedRange || !defaultValue || !filterItems?.length)
             return;
         const pixelRange = getPixelRange((Array.isArray(defaultValue) ? defaultValue : [defaultValue, defaultValue]), filterItems, barFullWidth);
         onSelect(pixelRange);
     }, [amount]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (lodash.isEmpty(filters[filterName]?.value)) {
             if (!lodash.isEmpty(selectedPixels)) {
                 setSelectedPixels(null);
@@ -7574,14 +8132,14 @@ const BarChartFilter = ({ type, config, elementConfig, filter }) => {
         elementConfig,
         filter
     });
-    const renderSelectedRange = react.useMemo(() => {
+    const renderSelectedRange = React.useMemo(() => {
         if (!selectedRange)
             return null;
         return (jsxRuntime.jsx(BarChartFilterSelected, { children: selectedRange[0] === selectedRange[1]
                 ? data[selectedRange[0]].groupName
                 : `${data[selectedRange[0]].groupName} - ${data[selectedRange[1]].groupName}` }));
     }, [data, selectedRange]);
-    const renderTooltip = react.useCallback((groups) => {
+    const renderTooltip = React.useCallback((groups) => {
         const group = groups[0];
         return (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(TooltipContainer, { children: group.groupName === group.value.toString() ? group.value : [group.groupName, group.value].join(": ") }) }));
     }, []);
@@ -7594,25 +8152,25 @@ const RangeDateFilter = ({ type, filter }) => {
     const { t } = useGlobalContext();
     const { changeFilters, dataSources } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
-    const [value, setValue] = react.useState([undefined, undefined]);
-    const isInit = react.useRef(false);
+    const [value, setValue] = React.useState([undefined, undefined]);
+    const isInit = React.useRef(false);
     const updateDebounce = useDebouncedCallback(FILTER_UPDATE_DEBOUNCE);
     const { filters: configFilters } = currentPage;
     const { filterName, label, minValue, maxValue, withTime } = filter.options;
-    const configFilter = react.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
-    const dataSource = react.useMemo(() => getDataSource(configFilter?.relatedDataSource, dataSources), [configFilter?.relatedDataSource, dataSources]);
-    const { minFromData, maxFromData } = react.useMemo(() => dataSource?.features?.reduce((prev, { attributes }) => {
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, configFilters), [configFilters, filterName]);
+    const dataSource = React.useMemo(() => getDataSource(configFilter?.relatedDataSource, dataSources), [configFilter?.relatedDataSource, dataSources]);
+    const { minFromData, maxFromData } = React.useMemo(() => dataSource?.features?.reduce((prev, { attributes }) => {
         const date = getDate(attributes[configFilter?.attributeValue]);
         return {
             minFromData: !prev.minFromData ? date : date < prev.minFromData ? date : prev.minFromData,
             maxFromData: !prev.maxFromData ? date : date > prev.maxFromData ? date : prev.maxFromData
         };
     }, DEFAULT_FROM_DATA) || DEFAULT_FROM_DATA, [configFilter?.attributeValue, dataSource?.features]);
-    const minDate = react.useMemo(() => minValue || minFromData.toISOString(), [minFromData, minValue]);
-    const maxDate = react.useMemo(() => maxValue || maxFromData.toISOString(), [maxFromData, maxValue]);
-    const isEmpty = react.useMemo(() => lodash.isNil(value?.[0]) && lodash.isNil(value?.[1]), [value]);
-    const isDefault = react.useMemo(() => value?.[0] === minDate && value?.[1] === maxDate, [maxDate, minDate, value]);
-    const reset = react.useCallback(() => {
+    const minDate = React.useMemo(() => minValue || minFromData.toISOString(), [minFromData, minValue]);
+    const maxDate = React.useMemo(() => maxValue || maxFromData.toISOString(), [maxFromData, maxValue]);
+    const isEmpty = React.useMemo(() => lodash.isNil(value?.[0]) && lodash.isNil(value?.[1]), [value]);
+    const isDefault = React.useMemo(() => value?.[0] === minDate && value?.[1] === maxDate, [maxDate, minDate, value]);
+    const reset = React.useCallback(() => {
         setValue([minDate, maxDate]);
         changeFilters({
             [filterName]: {
@@ -7622,15 +8180,15 @@ const RangeDateFilter = ({ type, filter }) => {
             }
         }, configFilter?.resetFilters);
     }, [changeFilters, configFilter?.resetFilters, filterName, maxDate, minDate]);
-    const onChange = react.useCallback((newValue) => {
+    const onChange = React.useCallback((newValue) => {
         setValue([newValue[0].toISOString(), newValue[1].toISOString()]);
     }, []);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!lodash.isNil(minDate) && !lodash.isNil(maxDate)) {
             reset();
         }
     }, []); // eslint-disable-line
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!isInit.current) {
             isInit.current = true;
             return;
@@ -7708,7 +8266,7 @@ const getFilterValue = ({ selectedFilters, configFilters, filterName, newValue,
 const getFormattedAttributes = (t, data, attributes, config) => {
     const showOtherItems = config?.options?.otherItems < data?.length;
     const otherIndex = config?.options?.otherItems + 1;
-    const otherAttribute = showOtherItems && config?.children?.[otherIndex]
+    const otherAttribute = showOtherItems && config?.children?.[otherIndex] && attributes?.length
         ? attributes.find(({ name }) => name === config?.children?.[otherIndex]?.attributeName)
         : null;
     return otherAttribute
@@ -7819,7 +8377,7 @@ const getSvgUrl = ({ elementConfig, layerInfo, attributes, }) => {
     }
     else {
         url = elementConfig.attributeName
-            ? attributes.find(item => item.name === elementConfig.attributeName)?.value?.toString()
+            ? attributes?.find(item => item.name === elementConfig.attributeName)?.value?.toString()
             : elementConfig.value?.toString();
     }
     if (!url || typeof url !== "string")
@@ -7829,7 +8387,7 @@ const getSvgUrl = ({ elementConfig, layerInfo, attributes, }) => {
 
 const getTotalFromAttributes = (children, attributes) => {
     const total = children?.reduce((result, { attributeName }) => {
-        const value = attributes.find(({ name }) => name === attributeName)?.value || 0;
+        const value = attributes?.find(({ name }) => name === attributeName)?.value || 0;
         return result + value;
     }, 0);
     return typeof total === "number" ? total.toFixed(0) : "";
@@ -7840,7 +8398,7 @@ const getTotalFromRelatedFeatures = (data) => {
 };
 
 const pieChartTooltipFromAttributes = (t, data, attributes) => {
-    const attribute = attributes.find(({ name }) => name === data[0].name);
+    const attribute = attributes?.find(({ name }) => name === data[0].name);
     const renderValue = attribute
         ? formatAttributeValue({ t, type: attribute.type, value: data[0].value, stringFormat: attribute.stringFormat })
         : data[0].value;
@@ -7894,7 +8452,7 @@ const sliceShownOtherItems = (data, options = {}, showMore) => {
 };
 
 const tooltipNameFromAttributes = (name, attributes) => {
-    const attribute = attributes.find(item => item.name === name);
+    const attribute = attributes?.find(item => item.name === name);
     return attribute?.alias || name;
 };
 
@@ -7908,9 +8466,9 @@ const tooltipValueFromRelatedFeatures = (t, value, relatedAttributes, layerInfo)
 };
 
 const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
-    const { config: configProp } = react.useContext(ConfigContext);
+    const { config: configProp } = React.useContext(ConfigContext);
     const { projectInfo, layerInfo } = useWidgetContext(type);
-    const config = react.useMemo(() => {
+    const config = React.useMemo(() => {
         if (configProp) {
             return configProp;
         }
@@ -7919,7 +8477,7 @@ const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
         }
         return (layerInfo?.configuration?.cardConfiguration || {});
     }, [configProp, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type]);
-    const pages = react.useMemo(() => (getPagesFromConfig(config) || []), [config]);
+    const pages = React.useMemo(() => (getPagesFromConfig(config) || []), [config]);
     return {
         config,
         pages,
@@ -7930,10 +8488,11 @@ const useWidgetPage = (type = exports.WidgetType.Dashboard) => {
     const { t } = useGlobalContext();
     const { pageIndex, changePage, projectInfo, updateProject } = useWidgetContext(type);
     const { config } = useWidgetConfig(type);
-    const currentPage = react.useMemo(() => {
+    const currentPage = React.useMemo(() => {
         const page = getPagesFromConfig(config)?.[pageIndex - 1];
         return {
             ...(page || {}),
+            header: page?.header || config.header,
             dataSources: [
                 ...(page?.dataSources?.filter(({ name }) => !config.dataSources?.some(item => item.name === name)) || []),
                 ...(config.dataSources || [])
@@ -7948,7 +8507,7 @@ const useWidgetPage = (type = exports.WidgetType.Dashboard) => {
             })) || []
         };
     }, [config, pageIndex]);
-    const updateConfigPage = react.useCallback((newConfig) => {
+    const updateConfigPage = React.useCallback((newConfig) => {
         const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
         const pages = getPagesFromProjectInfo(newProjectInfo);
         if (!pages?.[pageIndex - 1])
@@ -7956,7 +8515,7 @@ const useWidgetPage = (type = exports.WidgetType.Dashboard) => {
         pages[pageIndex - 1] = { ...pages[pageIndex - 1], ...newConfig };
         updateProject(newProjectInfo);
     }, [projectInfo, pageIndex, updateProject]);
-    const addConfigPage = react.useCallback(() => {
+    const addConfigPage = React.useCallback(() => {
         const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
         const pages = getPagesFromProjectInfo(newProjectInfo);
         if (!pages)
@@ -7965,7 +8524,7 @@ const useWidgetPage = (type = exports.WidgetType.Dashboard) => {
         updateProject(newProjectInfo);
         changePage(pages.length);
     }, [changePage, projectInfo, t, updateProject]);
-    const deleteConfigPage = react.useCallback((index) => {
+    const deleteConfigPage = React.useCallback((index) => {
         const newProjectInfo = JSON.parse(JSON.stringify(projectInfo));
         const pages = getPagesFromProjectInfo(newProjectInfo);
         if (!pages?.[index] || pages.length === 1)
@@ -7983,10 +8542,10 @@ const useChartData = ({ element, type }) => {
     const { t } = useGlobalContext();
     const { dataSources, layerInfos, attributes } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
-    const relatedAttributes = react.useMemo(() => element?.options?.relatedDataSources || [], [element?.options?.relatedDataSources]);
-    const loading = react.useMemo(() => !!relatedAttributes?.length &&
+    const relatedAttributes = React.useMemo(() => element?.options?.relatedDataSources || [], [element?.options?.relatedDataSources]);
+    const loading = React.useMemo(() => !!relatedAttributes?.length &&
         !dataSources?.some(({ name }) => relatedAttributes.some(({ chartAxis, dataSourceName }) => chartAxis === "y" && dataSourceName === name)), [dataSources, relatedAttributes]);
-    const fetchedData = react.useMemo(() => {
+    const fetchedData = React.useMemo(() => {
         const configDataSources = currentPage?.dataSources || [];
         const isRelated = !!relatedAttributes?.length;
         const filteredAttributes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
@@ -8039,8 +8598,8 @@ const useChartData = ({ element, type }) => {
         layerInfos,
         dataSources
     ]);
-    const [data, setData] = react.useState(fetchedData);
-    react.useEffect(() => {
+    const [data, setData] = React.useState(fetchedData);
+    React.useEffect(() => {
         if (!loading && fetchedData?.length) {
             setData(fetchedData);
         }
@@ -8048,17 +8607,34 @@ const useChartData = ({ element, type }) => {
     return { data, loading };
 };
 
-const useDashboardHeader = (renderElement) => {
+const useHeaderRender = (elementConfig, type = exports.WidgetType.Dashboard) => {
+    const { layerInfo, attributes, expandedContainers, selectedTabId, setSelectedTabId } = useWidgetContext(type);
+    const { config } = useWidgetConfig(type);
+    const { pageIndex } = useWidgetPage(type);
+    return React.useMemo(() => getRenderElement({
+        config,
+        elementConfig,
+        attributes,
+        layerInfo,
+        expandedContainers,
+        selectedTabId,
+        setSelectedTabId,
+        pageIndex,
+    }), [config, elementConfig, attributes, layerInfo, expandedContainers, selectedTabId, setSelectedTabId, pageIndex]);
+};
+
+const useDashboardHeader = () => {
     const { themeName } = useGlobalContext();
     const { projectInfo } = useWidgetContext();
     const { currentPage } = useWidgetPage();
     const { alias, name } = projectInfo || {};
     const { id: pageId, header } = currentPage || {};
-    const image = react.useMemo(() => (header?.children?.some(({ id }) => id === "image") ? renderElement({ id: "image", wrap: false }) : null), [header?.children, renderElement]);
-    const icon = react.useMemo(() => header?.children?.some(({ id }) => id === "icon") ? (renderElement({ id: "icon", wrap: false })) : (jsxRuntime.jsx(uilibGl.Icon, { kind: "logo", style: { width: "2rem", height: "2rem" } })), [header?.children, renderElement]);
-    const title = react.useMemo(() => header?.children?.some(({ id }) => id === "title") ? renderElement({ id: "title" }) : currentPage?.options?.title, [header?.children, renderElement, currentPage?.options?.title]);
-    const tooltip = react.useMemo(() => (jsxRuntime.jsxs(uilibGl.Flex, { textAlign: "left", children: [jsxRuntime.jsx("div", { children: alias || name }), jsxRuntime.jsx(uilibGl.Flex, { opacity: 0.54, children: title })] })), [alias, name, title]);
-    const description = react.useMemo(() => (header?.children?.some(({ id }) => id === "description") ? renderElement({ id: "description" }) : ""), [header?.children, renderElement]);
+    const renderElement = useHeaderRender(header);
+    const image = React.useMemo(() => (header?.children?.some(({ id }) => id === "image") ? renderElement({ id: "image", wrap: false }) : null), [header?.children, renderElement]);
+    const icon = React.useMemo(() => header?.children?.some(({ id }) => id === "icon") ? (renderElement({ id: "icon", wrap: false })) : (jsxRuntime.jsx(uilibGl.Icon, { kind: "logo", style: { width: "2rem", height: "2rem" } })), [header?.children, renderElement]);
+    const title = React.useMemo(() => header?.children?.some(({ id }) => id === "title") ? renderElement({ id: "title" }) : currentPage?.options?.title, [header?.children, renderElement, currentPage?.options?.title]);
+    const tooltip = React.useMemo(() => (jsxRuntime.jsxs(uilibGl.Flex, { textAlign: "left", children: [jsxRuntime.jsx("div", { children: alias || name }), jsxRuntime.jsx(uilibGl.Flex, { opacity: 0.54, children: title })] })), [alias, name, title]);
+    const description = React.useMemo(() => (header?.children?.some(({ id }) => id === "description") ? renderElement({ id: "description" }) : ""), [header?.children, renderElement]);
     return {
         pageId,
         image,
@@ -8067,6 +8643,7 @@ const useDashboardHeader = (renderElement) => {
         tooltip,
         description,
         themeName,
+        renderElement,
     };
 };
 
@@ -8076,8 +8653,8 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
     const { ewktGeometry, api } = useGlobalContext();
     const { dataSources } = useWidgetContext(widgetType);
     const { filters: configFilters, dataSources: configDataSources } = config || {};
-    const prevFilters = react.useRef({});
-    const getDataSourcePromises = react.useCallback(async ({ ds, query, parameters, layerName, limit, condition, url, resourceId, type }, newFilters, offset = 0) => {
+    const prevFilters = React.useRef({});
+    const getDataSourcePromises = React.useCallback(async ({ ds, query, parameters, layerName, limit, condition, url, resourceId, type }, newFilters, offset = 0) => {
         const selectedFilters = {
             ...(filters || {}),
             ...(newFilters || {}),
@@ -8139,7 +8716,7 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
                 : [condition, query].filter(Boolean),
         });
     }, [filters, dataSources, configFilters, ewktGeometry, attributes, layerParams, eqlParameters]);
-    const getUpdatingDataSources = react.useCallback(() => {
+    const getUpdatingDataSources = React.useCallback(() => {
         const diffFilterNames = filters
             ? Object.keys(filters).filter(key => Array.isArray(filters[key].value)
                 ? filters[key].value.length !== prevFilters.current[key]?.value?.length ||
@@ -8156,7 +8733,7 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
         prevFilters.current = JSON.parse(JSON.stringify(filters));
         return filteredDataSources;
     }, [configDataSources, filters]);
-    const getUpdatedDataSources = react.useCallback((responses, currentDataSources, otherDataSources) => {
+    const getUpdatedDataSources = React.useCallback((responses, currentDataSources, otherDataSources) => {
         const newDataSources = JSON.parse(JSON.stringify([...currentDataSources, ...otherDataSources]));
         responses.forEach((response, index) => {
             const isQueryDataSource = !lodash.isNil(currentDataSources[index].query) ||
@@ -8179,7 +8756,7 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
         });
         return newDataSources;
     }, []);
-    const zoomToLayersExtent = react.useCallback(async (layers) => {
+    const zoomToLayersExtent = React.useCallback(async (layers) => {
         const newExtent = await api.layers.getBulkExtents({ srId: 4326 }, layers?.map(({ layerName, conditions, parameters }) => ({
             layerName,
             conditions,
@@ -8210,17 +8787,17 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
 
 const useDiffPage = (type) => {
     const { pageIndex } = useWidgetContext(type);
-    const prevPageIndex = react.useRef(pageIndex);
+    const prevPageIndex = React.useRef(pageIndex);
     const isDiffPage = prevPageIndex.current !== pageIndex;
-    react.useEffect(() => {
+    React.useEffect(() => {
         prevPageIndex.current = pageIndex;
     }, [pageIndex]);
-    return react.useMemo(() => isDiffPage, [isDiffPage]);
+    return React.useMemo(() => isDiffPage, [isDiffPage]);
 };
 
 const useExpandableContainers = () => {
-    const [expandedContainers, setExpandedContainers] = react.useState({});
-    const expandContainer = react.useCallback((id, expanded) => {
+    const [expandedContainers, setExpandedContainers] = React.useState({});
+    const expandContainer = React.useCallback((id, expanded) => {
         setExpandedContainers(state => ({
             ...state,
             [id]: state?.[id] === undefined && expanded !== undefined ? !expanded : !state?.[id],
@@ -8244,11 +8821,11 @@ const useFeatureFilters = (type, filterName, items) => {
     const theme = styled.useTheme();
     const { filters, changeFilters } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
-    const configFilter = react.useMemo(() => getConfigFilter(filterName, currentPage.filters), [currentPage.filters, filterName]);
+    const configFilter = React.useMemo(() => getConfigFilter(filterName, currentPage.filters), [currentPage.filters, filterName]);
     const hasAnyFilter = Array.isArray(filters?.[filterName]?.value)
         ? !!filters[filterName].value.length
         : !!filters?.[filterName]?.value;
-    const isFiltered = react.useCallback((name) => {
+    const isFiltered = React.useCallback((name) => {
         const filterValue = filters[filterName]?.value || configFilter?.defaultValue;
         if (!Array.isArray(filterValue)) {
             return filterValue === name;
@@ -8258,7 +8835,7 @@ const useFeatureFilters = (type, filterName, items) => {
                 ? filterValue.includes(name)
                 : filterValue?.[0] <= name && filterValue?.[1] >= name));
     }, [configFilter?.defaultValue, configFilter?.valueType, filterName, filters]);
-    const formatFilterColor = react.useCallback((name, color, defaultColor = FEATURE_CARD_OTHER_COLOR) => {
+    const formatFilterColor = React.useCallback((name, color, defaultColor = FEATURE_CARD_OTHER_COLOR) => {
         return isFiltered(name)
             ? color || theme.palette.primary
             : hasAnyFilter
@@ -8267,7 +8844,7 @@ const useFeatureFilters = (type, filterName, items) => {
                     : defaultColor
                 : color || theme.palette.primary;
     }, [hasAnyFilter, isFiltered, theme.palette.primary]);
-    const onFilter = react.useCallback((newValue) => {
+    const onFilter = React.useCallback((newValue) => {
         const value = getFilterValue({
             selectedFilters: filters,
             configFilters: currentPage.filters,
@@ -8313,12 +8890,12 @@ const useFeatureFilters = (type, filterName, items) => {
 
 const useGetConfigLayer = () => {
     const { currentPage } = useWidgetPage();
-    return react.useCallback((layerName) => currentPage?.layers?.find(({ name }) => name === layerName), [currentPage?.layers]);
+    return React.useCallback((layerName) => currentPage?.layers?.find(({ name }) => name === layerName), [currentPage?.layers]);
 };
 
 const useProjectDashboardInit = () => {
     const { projectInfo, updateProject } = useWidgetContext();
-    return react.useCallback(() => {
+    return React.useCallback(() => {
         if (!lodash.isEmpty(projectInfo?.content?.dashboardConfiguration) || !projectInfo?.content?.items?.length) {
             return;
         }
@@ -8335,10 +8912,10 @@ const useRelatedDataSourceAttributes = ({ type = exports.WidgetType.Dashboard, e
     const { currentPage } = useWidgetPage(type);
     const { options } = elementConfig || {};
     const { relatedDataSource } = options || {};
-    const dataSource = react.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
-    const layerInfo = react.useMemo(() => getLayerInfoFromDataSources(layerInfos, currentPage?.dataSources, relatedDataSource) ||
+    const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [dataSources, relatedDataSource]);
+    const layerInfo = React.useMemo(() => getLayerInfoFromDataSources(layerInfos, currentPage?.dataSources, relatedDataSource) ||
         { layerDefinition: { attributes: dataSource?.attributeDefinition || {} } }, [currentPage?.dataSources, dataSource?.attributeDefinition, layerInfos, relatedDataSource]);
-    const attributes = react.useMemo(() => getFeatureAttributes(feature, layerInfo, dataSource), [dataSource, feature, layerInfo]);
+    const attributes = React.useMemo(() => getFeatureAttributes(feature, layerInfo, dataSource), [dataSource, feature, layerInfo]);
     return { layerInfo, attributes, dataSource };
 };
 
@@ -8347,7 +8924,7 @@ const useRenderElement = (type = exports.WidgetType.Dashboard, elementConfig) =>
     const { selectedTabId, setSelectedTabId, expandedContainers, layerInfo, attributes } = useWidgetContext(type);
     const { config } = useWidgetConfig(type);
     const { pageIndex } = useWidgetPage(type);
-    return react.useMemo(() => getRenderElement({
+    return React.useMemo(() => getRenderElement({
         t,
         type,
         config,
@@ -8392,7 +8969,7 @@ const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerPar
         layerParams,
         eqlParameters,
     });
-    return react.useCallback(async (newFilters, offset = 0) => {
+    return React.useCallback(async (newFilters, offset = 0) => {
         return getDataSourcePromises(dataSource, newFilters, offset).then((response) => {
             const responseDataSources = getUpdatedDataSources([response], [dataSource], dataSources);
             return {
@@ -8411,17 +8988,17 @@ const StackBar = ({ data, filterName, type, alias, options, renderElement, rende
     const { items, layerInfo, attributeName } = data?.[0] || {};
     const attribute = layerInfo?.layerDefinition.attributes[attributeName];
     const units = attribute?.stringFormat?.unitsLabel;
-    const total = react.useMemo(() => items?.reduce((result, { value }) => result + Number(value), 0) || 0, [items]);
-    const getWidth = react.useCallback(value => ((Number(value) / total) * 100).toFixed(2), [total]);
-    const renderGroupTooltip = react.useMemo(() => (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(ChartTooltipTable, { cellPadding: 0, cellSpacing: 0, children: items?.map(({ name, value, color }, index) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { children: jsxRuntime.jsxs(ChartTooltip, { children: [jsxRuntime.jsx(ChartTooltipColor, { "$color": color }), jsxRuntime.jsx(ChartTooltipName, { children: name })] }) }), jsxRuntime.jsx("td", { children: value })] }, index))) }) })), [items]);
-    const renderItem = react.useCallback(({ name, value, color }, ref) => (jsxRuntime.jsx(StackBarSection, { ref: ref, "$width": getWidth(value), "$height": height, "$color": color, cornerRadius: cornerRadius, hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: filterName ? () => onFilter(name) : undefined })), [cornerRadius, filterName, getWidth, hasAnyFilter, height, isFiltered, onFilter]);
-    const renderItems = react.useMemo(() => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items?.map((item, index) => (jsxRuntime.jsx(react.Fragment, { children: groupTooltip ? (renderItem(item)) : (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderTooltip([item]), children: ref => renderItem(item, ref) }) })) }, index))) })), [groupTooltip, items, renderItem, renderTooltip]);
+    const total = React.useMemo(() => items?.reduce((result, { value }) => result + Number(value), 0) || 0, [items]);
+    const getWidth = React.useCallback(value => ((Number(value) / total) * 100).toFixed(2), [total]);
+    const renderGroupTooltip = React.useMemo(() => (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(ChartTooltipTable, { cellPadding: 0, cellSpacing: 0, children: items?.map(({ name, value, color }, index) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { children: jsxRuntime.jsxs(ChartTooltip, { children: [jsxRuntime.jsx(ChartTooltipColor, { "$color": color }), jsxRuntime.jsx(ChartTooltipName, { children: name })] }) }), jsxRuntime.jsx("td", { children: value })] }, index))) }) })), [items]);
+    const renderItem = React.useCallback(({ name, value, color }, ref) => (jsxRuntime.jsx(StackBarSection, { ref: ref, "$width": getWidth(value), "$height": height, "$color": color, cornerRadius: cornerRadius, hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: filterName ? () => onFilter(name) : undefined })), [cornerRadius, filterName, getWidth, hasAnyFilter, height, isFiltered, onFilter]);
+    const renderItems = React.useMemo(() => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items?.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: groupTooltip ? (renderItem(item)) : (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderTooltip([item]), children: ref => renderItem(item, ref) }) })) }, index))) })), [groupTooltip, items, renderItem, renderTooltip]);
     if (!total || !attribute)
         return null;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alias || showTotal) && (jsxRuntime.jsxs(StackBarHeader, { children: [jsxRuntime.jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxRuntime.jsxs(StackBarTotal, { children: [jsxRuntime.jsx(StackBarValue, { children: formatAttributeValue({ t, type: attribute.type, value: total, stringFormat: attribute.stringFormat, noUnits: true }) }), !!units && jsxRuntime.jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => jsxRuntime.jsx(StackBarContainer, { ref: ref, children: renderItems }) })) : (jsxRuntime.jsx(StackBarContainer, { children: renderItems }))] }));
 };
 
-const Chart = react.memo(({ config, element, elementConfig, type, renderElement }) => {
+const Chart = React.memo(({ config, element, elementConfig, type, renderElement }) => {
     const theme = styled.useTheme();
     const { palette } = theme;
     const { t } = useGlobalContext();
@@ -8440,8 +9017,8 @@ const Chart = react.memo(({ config, element, elementConfig, type, renderElement
     const barWidth = options?.barWidth || DEFAULT_BAR_WIDTH;
     const cornerRadius = options?.cornerRadius || 0;
     const primaryColor = theme.palette.primary;
-    const relatedAttributes = react.useMemo(() => relatedDataSources || [], [relatedDataSources]);
-    const axes = react.useMemo(() => relatedAttributes.filter(({ chartAxis }) => chartAxis === "y"), [relatedAttributes]);
+    const relatedAttributes = React.useMemo(() => relatedDataSources || [], [relatedDataSources]);
+    const axes = React.useMemo(() => relatedAttributes.filter(({ chartAxis }) => chartAxis === "y"), [relatedAttributes]);
     const filterName = getChartFilterName(relatedDataSources);
     const isRelated = !!relatedAttributes?.length;
     const { data, loading } = useChartData({ element, type });
@@ -8467,23 +9044,23 @@ const Chart = react.memo(({ config, element, elementConfig, type, renderElement
         defaultColor: primaryColor
     });
     const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, data?.[0]?.items);
-    const formattedAttributes = react.useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
-    const totalSum = react.useMemo(() => isRelated
+    const formattedAttributes = React.useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
+    const totalSum = React.useMemo(() => isRelated
         ? getTotalFromRelatedFeatures((data[0]?.items || []))
         : getTotalFromAttributes(children, formattedAttributes), [data, children, formattedAttributes, isRelated]);
-    const totalWord = react.useMemo(() => options?.totalAttribute
-        ? attributes.find(({ name }) => name === options.totalAttribute)?.value
+    const totalWord = React.useMemo(() => options?.totalAttribute
+        ? attributes?.find(({ name }) => name === options.totalAttribute)?.value
         : options?.totalWord, [attributes, options.totalAttribute, options?.totalWord]);
-    const renderPieChartTooltip = react.useCallback(item => isRelated
+    const renderPieChartTooltip = React.useCallback(item => isRelated
         ? pieChartTooltipFromRelatedFeatures(t, item, relatedAttributes, data[0]?.layerInfo)
         : pieChartTooltipFromAttributes(t, item, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
-    const labels = react.useMemo(() => {
+    const labels = React.useMemo(() => {
         if (!isLineChart)
             return [];
         const result = data?.map(item => item?.items?.map(({ name }) => name?.toString()))?.flat();
         return result?.filter((name, index) => result.indexOf(name) === index);
     }, [data, isLineChart]);
-    const renderLineChartTooltip = react.useCallback((items, { indexX }) => {
+    const renderLineChartTooltip = React.useCallback((items, { indexX }) => {
         return (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsxs(ChartTooltip, { children: [jsxRuntime.jsx("div", { children: labels[indexX] }), items
                         .filter(({ value }) => !isEmptyValue(value))
                         ?.map(({ layerName, attributeName, value, stroke }, index) => {
@@ -8492,12 +9069,12 @@ const Chart = react.memo(({ config, element, elementConfig, type, renderElement
                         return (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.jsx(ChartLegendValue, { children: attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value })] }, index));
                     })] }) }));
     }, [labels, layerInfos]);
-    const markers = react.useMemo(() => getChartMarkers(data[0]?.items, configMarkers), [data, configMarkers]);
-    const formatTooltipName = react.useCallback((name) => (isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes)), [formattedAttributes, isRelated]);
-    const formatTooltipValue = react.useCallback((value, name) => isRelated
+    const markers = React.useMemo(() => getChartMarkers(data[0]?.items, configMarkers), [data, configMarkers]);
+    const formatTooltipName = React.useCallback((name) => (isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes)), [formattedAttributes, isRelated]);
+    const formatTooltipValue = React.useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
         : tooltipValueFromAttributes(t, value, name, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
-    const renderChart = react.useMemo(() => {
+    const renderChart = React.useMemo(() => {
         if (!element)
             return null;
         if (isLineChart) {
@@ -8588,7 +9165,7 @@ const Chart = react.memo(({ config, element, elementConfig, type, renderElement
 const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const { t } = useGlobalContext();
     const { sliceItems, showMore, onShowMore } = useShownOtherItems(chartElement?.options);
-    const axes = react.useMemo(() => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y"), [chartElement?.options?.relatedDataSources]);
+    const axes = React.useMemo(() => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y"), [chartElement?.options?.relatedDataSources]);
     const { isFiltered, hasAnyFilter, onFilter } = useFeatureFilters(type, axes?.[0]?.filterName);
     const { fontColor, shownItems, hideEmpty } = chartElement?.options || {};
     const showMoreBtn = !!shownItems && data.length > shownItems;
@@ -8597,7 +9174,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     return (jsxRuntime.jsxs(uilibGl.Flex, { opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard" }) }))] }));
 };
 
-const ContainerChildren = react.memo(({ items, isColumn, isMain, renderElement }) => {
+const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }) => {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items
             ?.filter(item => !["title", "icon", "titleIcon"].includes(item.id))
             ?.map((item, index) => {
@@ -8606,19 +9183,19 @@ const ContainerChildren = react.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(react.Fragment, { children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
         }) }));
 });
 
-const DashboardLoading = react.memo(() => {
+const DashboardLoading = React.memo(() => {
     return (jsxRuntime.jsx(ContainerWrapper, { children: jsxRuntime.jsx(DashboardWrapper, { children: jsxRuntime.jsx(DashboardPlaceholderWrap, { children: jsxRuntime.jsxs(DashboardPlaceholder, { isLoading: true, children: [jsxRuntime.jsx(uilibGl.Icon, { kind: "dashboard_loading" }), jsxRuntime.jsx(uilibGl.Flex, { width: "8rem", children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })] }) }) }) }));
 });
 
-const Dashboard = react.memo(({ type = exports.WidgetType.Dashboard, config }) => {
+const Dashboard = React.memo(({ type = exports.WidgetType.Dashboard, config }) => {
     const { dataSources, isLoading } = useWidgetContext(type);
     const { currentPage } = useWidgetPage();
     const isDiffPage = useDiffPage(type);
-    const dataSourceLoading = react.useMemo(() => currentPage?.dataSources?.length && !dataSources?.length && isLoading, [currentPage?.dataSources?.length, dataSources?.length, isLoading]);
+    const dataSourceLoading = React.useMemo(() => currentPage?.dataSources?.length && !dataSources?.length && isLoading, [currentPage?.dataSources?.length, dataSources?.length, isLoading]);
     if (dataSourceLoading || isDiffPage) {
         return (jsxRuntime.jsx(DashboardLoading, {}));
     }
@@ -8635,12 +9212,18 @@ const DashboardCheckbox = ({ title, checked, onChange, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AttributeLabel, { isEdit: !!onChange, forCheckbox: !!onChange, children: title }), onChange ? jsxRuntime.jsx(CardCheckbox, { checked: checked, label: label, onChange: onChange }) : label] }));
 };
 
+const DashboardHeader = React.memo(() => {
+    const { currentPage } = useWidgetPage();
+    const HeaderTemplate = React.useMemo(() => getDashboardHeader(currentPage?.header?.templateName), [currentPage?.header?.templateName]);
+    return jsxRuntime.jsx(HeaderTemplate, {});
+});
+
 const DataSourceError = ({ name }) => {
     const { t } = useGlobalContext();
     return (jsxRuntime.jsxs(DataSourceErrorContainer, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }), jsxRuntime.jsxs("div", { children: [t("block", { ns: "dashboard" }), " \"", name, "\" ", t("isNotLoaded", { ns: "dashboard" })] })] }));
 };
 
-const ExpandableTitle = react.memo(({ elementConfig, type, renderElement }) => {
+const ExpandableTitle = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options, templateName, children } = elementConfig || {};
     const { expandable, fontColor, expanded, layerNames } = options || {};
@@ -8651,6 +9234,50 @@ const ExpandableTitle = react.memo(({ elementConfig, type, renderElement }) => {
     return (jsxRuntime.jsx(TitleContainer, { containerId: id, elementConfig: titleElement, templateName: templateName, layerNames: layerNames, fontColor: fontColor, expandable: expandable, expanded: expanded, type: type, isVisible: isVisible, renderElement: renderElement }));
 });
 
+const FeatureCardButtons = () => {
+    const { closeFeatureCard } = useWidgetContext(exports.WidgetType.FeatureCard);
+    return (jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", style: {
+                padding: 0,
+                width: "1rem",
+            }, onClick: closeFeatureCard }) }));
+};
+
+const FeatureCardHeader = () => {
+    const { currentPage } = useWidgetPage(exports.WidgetType.FeatureCard);
+    const HeaderTemplate = getFeatureCardHeader(currentPage?.header?.templateName);
+    return jsxRuntime.jsx(HeaderTemplate, {});
+};
+
+const FeatureCardTitle = ({ title, description }) => {
+    const { t } = useGlobalContext();
+    const { attributes, layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const zoomToFeatures = useZoomToFeatures();
+    const { alias, name, layerDefinition, titleAttribute } = layerInfo || {};
+    const resultDescription = description || alias || name || "";
+    const resultTitle = React.useMemo(() => {
+        const layerDefinitionAttribute = layerDefinition && attributes?.length
+            ? attributes.find(item => item.name === layerDefinition.titleAttribute)
+            : null;
+        const layerDefinitionTitle = layerDefinition?.titleAttribute && layerDefinitionAttribute?.value
+            ? layerDefinitionAttribute.value
+            : null;
+        const sourceTitleAttribute = titleAttribute && attributes?.length ? attributes.find(item => item.name === titleAttribute) : null;
+        const sourceTitle = titleAttribute && sourceTitleAttribute?.value ? sourceTitleAttribute.value : null;
+        return (title ||
+            (!!sourceTitle &&
+                formatAttributeValue({ t, type: sourceTitleAttribute.type, value: sourceTitle, stringFormat: sourceTitleAttribute.stringFormat })) ||
+            (!!layerDefinitionTitle &&
+                formatAttributeValue({
+                    t,
+                    type: layerDefinitionAttribute.type,
+                    value: layerDefinitionTitle,
+                    stringFormat: layerDefinitionAttribute.stringFormat,
+                })) ||
+            feature?.id);
+    }, [attributes, feature?.id, layerDefinition, title, titleAttribute]);
+    return (jsxRuntime.jsxs(HeaderTitleContainer, { children: [jsxRuntime.jsx(FeatureTitleContainer, { clickable: true, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) }), jsxRuntime.jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+};
+
 const HiddenFilters = styled(uilibGl.Flex) `
   flex-wrap: wrap;
   margin-top: -1.25rem;
@@ -8673,15 +9300,15 @@ function isIsoDate(value) {
     const d = new Date(value);
     return !isNaN(d.getTime());
 }
-const HiddenTitleItems = react.memo(({ elementConfig, config, type, filter }) => {
+const HiddenTitleItems = React.memo(({ elementConfig, config, type, filter }) => {
     const { filters, dataSources, changeFilters, expandedContainers } = useWidgetContext(type);
     const { filters: configFilters } = config || {};
     const { id, options, children } = elementConfig || {};
     const { fontColor, expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const filterItems = react.useMemo(() => children?.filter(child => child.options?.filterName), [children]);
-    const configFilter = react.useMemo(() => getConfigFilter(filter, configFilters), [configFilters, filter]);
-    const clearFilter = react.useCallback((name, value) => {
+    const filterItems = React.useMemo(() => children?.filter(child => child.options?.filterName), [children]);
+    const configFilter = React.useMemo(() => getConfigFilter(filter, configFilters), [configFilters, filter]);
+    const clearFilter = React.useCallback((name, value) => {
         changeFilters({
             [name]: {
                 value: value &&
@@ -8693,26 +9320,26 @@ const HiddenTitleItems = react.memo(({ elementConfig, config, type, filter }) =>
             },
         }, configFilter?.resetFilters);
     }, [changeFilters, configFilter?.resetFilters, configFilter?.valueType, filters]);
-    const selectedItems = react.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    const isLoading = react.useMemo(() => elementConfig?.children?.some(child => {
+    const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
+    const isLoading = React.useMemo(() => elementConfig?.children?.some(child => {
         const currentFilter = configFilters?.find(({ name }) => name === child.options?.filterName);
         return (!!currentFilter &&
             !!child.options?.filterName &&
             !dataSources?.some(({ name }) => name === currentFilter.relatedDataSource));
     }), [configFilters, dataSources, elementConfig?.children]);
-    const chipProps = react.useMemo(() => ({
+    const chipProps = React.useMemo(() => ({
         $fontSize: "0.75rem",
         $fontColor: fontColor,
         $bgColor: fontColor ? transparentizeColor(fontColor, 6) : null,
         $radius: "0.25rem",
     }), [fontColor]);
-    const formatValue = react.useCallback((value) => {
+    const formatValue = React.useCallback((value) => {
         return typeof value === "object" ? uilibGl.dateFormat(value) : isIsoDate(value) ? uilibGl.dateFormat(new Date(value)) : value;
     }, []);
-    const formatJoin = react.useCallback((valueType) => {
+    const formatJoin = React.useCallback((valueType) => {
         return valueType === "range" ? " - " : ", ";
     }, []);
-    const renderItem = react.useCallback((filterName, value, index) => {
+    const renderItem = React.useCallback((filterName, value, index) => {
         return (jsxRuntime.jsxs(DashboardChip$1, { ...chipProps, children: [value, " ", jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: () => clearFilter(filterName, value) })] }, index));
     }, [chipProps, clearFilter]);
     if (isLoading || isVisible || !selectedItems.length)
@@ -8749,7 +9376,7 @@ const PageNavigator = styled(uilibGl.Flex) `
   }
 `;
 
-const Pagination = react.memo(({ type }) => {
+const Pagination = React.memo(({ type = exports.WidgetType.Dashboard }) => {
     const { nextPage, prevPage } = useWidgetContext(type);
     const { pages } = useWidgetConfig(type);
     return (jsxRuntime.jsxs(PageNavigator, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "prev", onClick: () => prevPage(pages.length) }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "next", onClick: () => nextPage(pages.length) })] }));
@@ -8784,10 +9411,10 @@ const StyledSvg = styled.div `
   ${({ $fontColor }) => !!$fontColor && StyledSvgColorMixin};
 `;
 
-const SvgImage = react.memo(({ url, width, height, fontColor }) => {
-    const [svg, setSvg] = react.useState(null);
-    const [loading, setLoading] = react.useState(false);
-    react.useEffect(() => {
+const SvgImage = React.memo(({ url, width, height, fontColor }) => {
+    const [svg, setSvg] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
         if (!url || loading) {
             return;
         }
@@ -8799,7 +9426,7 @@ const SvgImage = react.memo(({ url, width, height, fontColor }) => {
             setLoading(false);
         });
     }, [url]);
-    react.useEffect(() => () => {
+    React.useEffect(() => () => {
         setSvg(null);
     }, []);
     if (!svg?.endsWith("</svg>"))
@@ -8807,11 +9434,11 @@ const SvgImage = react.memo(({ url, width, height, fontColor }) => {
     return (jsxRuntime.jsx(StyledSvg, { "$width": width, "$height": height, "$fontColor": fontColor, dangerouslySetInnerHTML: { __html: svg } }));
 });
 
-const TextTrim = react.memo(({ maxLength, expandable, lineBreak, children }) => {
+const TextTrim = React.memo(({ maxLength, expandable, lineBreak, children }) => {
     const { t } = useGlobalContext();
     const [expanded, toggleExpanded] = useToggle();
     const text = children?.toString();
-    const formatValue = react.useCallback((value) => {
+    const formatValue = React.useCallback((value) => {
         if (!lineBreak)
             return value;
         return jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: lodash.unescape(value).split(lineBreak).join("<br />") } });
@@ -8884,7 +9511,7 @@ const getClientStyleItemPrefixSuffix = (geometryType, type) => {
 const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, }) => {
     const clientStyle = layer?.configuration?.clientStyle;
     const { idAttribute, geometryType } = layer.layerDefinition || {};
-    const renderLayerByGeometryType = react.useCallback(() => {
+    const renderLayerByGeometryType = React.useCallback(() => {
         const visibility = visible ? "visible" : "none";
         switch (geometryType) {
             case api.GeometryType.Point:
@@ -8951,7 +9578,7 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, })
         visible,
         getLayerTempStyle,
     ]);
-    const renderClientStyle = react.useCallback(() => {
+    const renderClientStyle = React.useCallback(() => {
         return clientStyle.items.map(mockItem => {
             const prefixSuffix = getClientStyleItemPrefixSuffix(geometryType, mockItem.type);
             const isExtrusionItem = mockItem.type === "fill-extrusion";
@@ -8999,7 +9626,7 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, })
 };
 
 const Layer = ({ layer, layerType, visible, beforeId, tileUrl, getLayerTempStyle, onMount = () => null, }) => {
-    react.useEffect(onMount, []); // eslint-disable-line
+    React.useEffect(onMount, []); // eslint-disable-line
     if (!layer) {
         return null;
     }
@@ -9042,23 +9669,6 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-exports.ThemeName = void 0;
-(function (ThemeName) {
-    ThemeName["Light"] = "light";
-    ThemeName["Dark"] = "dark";
-})(exports.ThemeName || (exports.ThemeName = {}));
-
-exports.TmsType = void 0;
-(function (TmsType) {
-    TmsType["WMS"] = "WMS";
-    TmsType["TMS"] = "TMS";
-    TmsType["ArcGIS"] = "ArcGIS";
-})(exports.TmsType || (exports.TmsType = {}));
-exports.EditGeometryType = void 0;
-(function (EditGeometryType) {
-    EditGeometryType["Raster"] = "raster";
-})(exports.EditGeometryType || (exports.EditGeometryType = {}));
-
 exports.AddFeatureButton = AddFeatureButton;
 exports.AddFeatureContainer = AddFeatureContainer;
 exports.AttributeGalleryContainer = AttributeGalleryContainer;
@@ -9099,6 +9709,8 @@ exports.DashboardCheckbox = DashboardCheckbox;
 exports.DashboardChip = DashboardChip;
 exports.DashboardContent = DashboardContent;
 exports.DashboardContext = DashboardContext;
+exports.DashboardDefaultHeader = DashboardDefaultHeader;
+exports.DashboardHeader = DashboardHeader;
 exports.DashboardPlaceholder = DashboardPlaceholder;
 exports.DashboardPlaceholderWrap = DashboardPlaceholderWrap;
 exports.DashboardProvider = DashboardProvider;
@@ -9109,6 +9721,7 @@ exports.DataSourceErrorContainer = DataSourceErrorContainer;
 exports.DataSourceInnerContainer = DataSourceInnerContainer;
 exports.DataSourceProgressContainer = DataSourceProgressContainer;
 exports.DefaultAttributesContainer = DefaultAttributesContainer;
+exports.DefaultHeaderContainer = DefaultHeaderContainer;
 exports.DividerContainer = DividerContainer;
 exports.ElementButton = ElementButton;
 exports.ElementCamera = ElementCamera;
@@ -9127,24 +9740,40 @@ exports.FEATURE_CARD_DEFAULT_COLORS = FEATURE_CARD_DEFAULT_COLORS;
 exports.FEATURE_CARD_OTHER_COLOR = FEATURE_CARD_OTHER_COLOR;
 exports.FILTERED_VALUE_OPACITY = FILTERED_VALUE_OPACITY;
 exports.FILTER_PREFIX = FILTER_PREFIX;
+exports.FeatureCardButtons = FeatureCardButtons;
 exports.FeatureCardContext = FeatureCardContext;
+exports.FeatureCardDefaultHeader = FeatureCardDefaultHeader;
+exports.FeatureCardGradientHeader = FeatureCardGradientHeader;
+exports.FeatureCardHeader = FeatureCardHeader;
+exports.FeatureCardIconHeader = FeatureCardIconHeader;
 exports.FeatureCardProvider = FeatureCardProvider;
+exports.FeatureCardSlideshowHeader = FeatureCardSlideshowHeader;
+exports.FeatureCardTitle = FeatureCardTitle;
+exports.FeatureControls = FeatureControls;
+exports.FeatureTitleContainer = FeatureTitleContainer;
 exports.FiltersContainer = FiltersContainer;
 exports.GEOMETRY_ATTRIBUTE = GEOMETRY_ATTRIBUTE;
 exports.GlobalContext = GlobalContext;
 exports.GlobalProvider = GlobalProvider;
+exports.Header = Header;
+exports.HeaderContainer = HeaderContainer;
+exports.HeaderFrontView = HeaderFrontView;
+exports.HeaderTitleContainer = HeaderTitleContainer;
 exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
 exports.Layer = Layer;
+exports.LayerDescription = LayerDescription;
 exports.LayerGroup = LayerGroup;
 exports.LayerGroupList = LayerGroupList;
+exports.LayerIcon = LayerIcon;
 exports.LayerListContainer = LayerListContainer;
 exports.LayerTree = LayerTree;
 exports.LayersContainer = LayersContainer;
 exports.LayersListWrapper = LayersListWrapper;
 exports.LinearProgressContainer = LinearProgressContainer;
+exports.LogoContainer = LogoContainer;
 exports.MAX_CHART_WIDTH = MAX_CHART_WIDTH;
 exports.Map = Map$1;
 exports.MapContext = MapContext;
@@ -9154,6 +9783,7 @@ exports.NUMERIC_ATTRIBUTE_TYPES = NUMERIC_ATTRIBUTE_TYPES;
 exports.NoLiveSnapshotContainer = NoLiveSnapshotContainer;
 exports.OneColumnContainer = OneColumnContainer;
 exports.PageNavigator = PageNavigator;
+exports.PageTitle = PageTitle;
 exports.PagesContainer = PagesContainer;
 exports.Pagination = Pagination;
 exports.PresentationHeader = PresentationHeader;
@@ -9167,7 +9797,7 @@ exports.RoundedBackgroundContainer = RoundedBackgroundContainer;
 exports.ServerNotificationsContext = ServerNotificationsContext;
 exports.ServerNotificationsProvider = ServerNotificationsProvider;
 exports.SlideshowContainer = SlideshowContainer;
-exports.SmallPreviewContainer = SmallPreviewContainer;
+exports.SmallPreviewContainer = SmallPreviewContainer$1;
 exports.SmallPreviewControl = SmallPreviewControl;
 exports.SmallPreviewCounter = SmallPreviewCounter;
 exports.SmallPreviewImages = SmallPreviewImages;
@@ -9179,6 +9809,8 @@ exports.TIME_ZONE_FORMAT = TIME_ZONE_FORMAT;
 exports.TabsContainer = TabsContainer;
 exports.TextTrim = TextTrim;
 exports.TitleContainer = TitleContainer;
+exports.TopContainer = TopContainer;
+exports.TopContainerButtons = TopContainerButtons;
 exports.TwoColumnContainer = TwoColumnContainer;
 exports.TwoColumnsInnerContainer = TwoColumnsInnerContainer;
 exports.addDataSource = addDataSource;
@@ -9216,6 +9848,7 @@ exports.getChartFilterName = getChartFilterName;
 exports.getChartMarkers = getChartMarkers;
 exports.getConfigFilter = getConfigFilter;
 exports.getContainerComponent = getContainerComponent;
+exports.getDashboardHeader = getDashboardHeader;
 exports.getDataFromAttributes = getDataFromAttributes;
 exports.getDataFromRelatedFeatures = getDataFromRelatedFeatures;
 exports.getDataSource = getDataSource;
@@ -9224,6 +9857,7 @@ exports.getDate = getDate;
 exports.getDefaultConfig = getDefaultConfig;
 exports.getElementValue = getElementValue;
 exports.getFeatureAttributes = getFeatureAttributes;
+exports.getFeatureCardHeader = getFeatureCardHeader;
 exports.getFilterComponent = getFilterComponent;
 exports.getFilterSelectedItems = getFilterSelectedItems;
 exports.getFilterValue = getFilterValue;
@@ -9275,6 +9909,7 @@ exports.useExpandableContainers = useExpandableContainers;
 exports.useFeatureFilters = useFeatureFilters;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
+exports.useHeaderRender = useHeaderRender;
 exports.useLayerParams = useLayerParams;
 exports.useMapContext = useMapContext;
 exports.useMapDraw = useMapDraw;