@evergis/react 3.1.42 → 3.1.47

package/dist/index.js

@@ -22,6 +22,8 @@ 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 = require('swiper/react');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -4448,24 +4450,48 @@ const formatDataSourceCondition = ({ condition, configFilters, filters, attribut
 const DashboardChipsContainer = styled(uilibGl.Flex) `
   flex-wrap: wrap;
 `;
+const DefaultChipColorMixin = styled.css `
+  && {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && > * {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && span[kind]:after {
+    color: ${({ theme: { palette } }) => palette.icon};
+  }
+`;
+const CustomChipColorMixin = styled.css `
+  && {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && > * {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && span[kind]:after {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
 const DashboardChip$1 = styled(uilibGl.Chip) `
   margin: 0 0.25rem 0.25rem 0;
   background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
   border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
   white-space: nowrap;
   font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-  color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.textPrimary : $fontColor || "#fff"};
+  color: ${({ theme: { palette } }) => palette.iconContrast};
 
   > * {
     font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-    color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.textPrimary : $fontColor || "#fff"};
   }
 
   span[kind] {
     height: 0.875rem;
 
     :after {
-      color: ${({ $isDefault, $fontColor, theme: { palette } }) => ($isDefault ? palette.icon : $fontColor || "#fff")};
       font-size: 0.875rem;
     }
   }
@@ -4474,6 +4500,9 @@ const DashboardChip$1 = styled(uilibGl.Chip) `
     width: auto;
     padding: 0 0.5rem;
   }
+
+  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
+  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
 const ChartLegendContainer = styled(uilibGl.Flex) `
@@ -5040,7 +5069,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
     if (!group) {
         return null;
     }
-    return (jsxRuntime.jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxRuntime.jsxs(LayerGroupMain, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: group.isExpanded ? "tree_folder_open" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxRuntime.jsxs(uilibGl.Description, { children: [jsxRuntime.jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsxRuntime.jsx(uilibGl.IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsxRuntime.jsx(uilibGl.Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsxRuntime.jsx(uilibGl.Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
+    return (jsxRuntime.jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxRuntime.jsxs(LayerGroupMain, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: group.isExpanded ? "tree_folder_opened" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxRuntime.jsxs(uilibGl.Description, { children: [jsxRuntime.jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsxRuntime.jsx(uilibGl.IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsxRuntime.jsx(uilibGl.Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsxRuntime.jsx(uilibGl.Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
 };
 
 const createTreeNode = (layer, Component, onlyMainTools) => {
@@ -5103,9 +5132,6 @@ const LayerListContainer = styled(uilibGl.Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${uilibGl.transition.toggle};
 `;
-const InnerContainerWrapper$1 = styled.div `
-  width: 100%;
-`;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
   min-height: 1rem;
@@ -5448,24 +5474,24 @@ const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElemen
     const { column, expandable, expanded } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    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 }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, 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 { options, style } = elementConfig || {};
+    const { id, options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
     const value = renderElement({ id: "value" });
     const hasUnits = elementConfig?.children?.some(({ id }) => id === "units");
     if (!value && hideEmpty)
         return null;
-    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" }) })] })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, 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 { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
     const renderContainer = React.useCallback((element, attribute) => {
-        const { options, style, children } = element || {};
+        const { id, options, style, children } = element || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
         const hasUnits = children?.some(({ id }) => id === "units");
         const iconIndex = children?.findIndex(({ id }) => id === "icon");
@@ -5503,7 +5529,7 @@ const TwoColumnContainer = React.memo(({ config, elementConfig, type, renderElem
         const value = render({ id: "value" });
         if (!value && hideEmpty)
             return null;
-        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
     }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type]);
     return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(attribute => renderContainer(elementConfig, attribute)) })) : (renderContainer(elementConfig));
 });
@@ -5694,7 +5720,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         dataSources
     });
     const { attributes } = layerInfo?.configuration?.attributesConfiguration || {};
-    const { id, options, children } = elementConfig || {};
+    const { id, options, children, style } = elementConfig || {};
     const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
@@ -5722,7 +5748,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(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", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { id: id, style: style, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
 const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -5734,7 +5760,7 @@ const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue,
         dataSources,
         feature
     });
-    const { children, options, style } = elementConfig || {};
+    const { id, children, options, style } = elementConfig || {};
     const { bgColor, innerTemplateStyle, maxValue: optionMaxValue, hideTitle, innerValue, colors, colorAttribute } = options;
     const valueElement = children?.find(({ id }) => id === "value");
     const unitsElement = children?.find(({ id }) => id === "units");
@@ -5761,7 +5787,7 @@ const ProgressContainer = React.memo(({ type, elementConfig, feature, maxValue,
     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 })] })] })] })) }));
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxRuntime.jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, children: [renderIcon && jsxRuntime.jsx(ProgressIcon, { children: renderIcon }), jsxRuntime.jsxs(ProgressContent, { children: [!hideTitle && (jsxRuntime.jsxs(ProgressAlias, { children: [jsxRuntime.jsx("div", { children: renderAlias }), jsxRuntime.jsxs(ProgressValue, { children: [renderValue, unitsElement && jsxRuntime.jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxRuntime.jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsxRuntime.jsx(ProgressBarWrapper, { children: jsxRuntime.jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsxRuntime.jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const RANGE_MIN_VALUE = 0;
@@ -5955,7 +5981,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxRuntime.jsxs(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 })] }));
+    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, { id: id, 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 }) => {
@@ -5964,7 +5990,7 @@ const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
 });
 
 const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
-    const { options, children } = elementConfig || {};
+    const { id, style, options, children } = elementConfig || {};
     const { twoColumns, hideEmpty } = options || {};
     const aliasElement = children.find(({ id }) => id === "alias");
     const chartElement = children.find(({ id }) => id === "chart");
@@ -5979,7 +6005,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(uilibGl.FlexSpan, { flexDirection: "column", 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, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: style, 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, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
@@ -6015,10 +6041,6 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
     return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: 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$1 = styled.div `
   position: absolute;
   top: 0;
@@ -6080,8 +6102,8 @@ const ImageContainerWrapper = styled(uilibGl.Flex) `
 `;
 
 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$1, { children: renderElement({ id: "image" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsxs(ImageContainerWrapper, { id: id, 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) `
@@ -6133,7 +6155,8 @@ const IconContainerText = styled.div `
 `;
 
 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 { id, style } = elementConfig || {};
+    return (jsxRuntime.jsxs(IconContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(IconContainerHeaderWrapper, { children: [jsxRuntime.jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsxRuntime.jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsxRuntime.jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
 });
 
 const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
@@ -6148,7 +6171,7 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isLoading = !dataSource?.features;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { id: id, isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = styled.css `
@@ -6174,12 +6197,25 @@ const SvgContainer = styled.div `
 const ContainerIconTitle = styled(uilibGl.Flex) `
   align-items: center;
   flex-wrap: nowrap;
+  flex-shrink: 1;
+  flex-grow: 0;
   color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textSecondary};
 
+  > div {
+    flex-shrink: 1;
+    flex-grow: 0;
+    width: auto;
+  }
+
+  ${SvgContainer} {
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-right: 0.5rem;
+  }
+  
   svg,
   img,
-  span[kind],
-  ${SvgContainer} {
+  span[kind] {
     margin-right: 0.5rem;
   }
 
@@ -6245,7 +6281,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const { expandContainer, expandedContainers, setDashboardLayer } = useWidgetContext(type);
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = styled.useTheme();
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { simple, downloadById } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
     const { onExport } = useExportPdf(downloadById);
@@ -6263,7 +6299,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const renderVisibility = React.useMemo(() => isLayers && (jsxRuntime.jsx(uilibGl.FlexSpan, { mr: "-1rem", children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = React.useMemo(() => !!containerId &&
         expandable && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsxRuntime.jsx(Container, { 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" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsxRuntime.jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -6272,7 +6308,8 @@ const ContainerDivider = styled(uilibGl.Divider) `
 `;
 
 const DividerContainer = React.memo(({ elementConfig, config }) => {
-    return (jsxRuntime.jsx(Container, { style: elementConfig?.style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
 });
 
 const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
@@ -6282,7 +6319,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         elementConfig,
         dataSources,
     });
-    const { id, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const render = React.useMemo(() => getRenderElement({
@@ -6307,7 +6344,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         pageIndex,
         type,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: elementConfig?.style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -6318,7 +6355,7 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -6402,7 +6439,7 @@ const SwiperContainer = styled.div `
 const TabsContainer = React.memo(({ elementConfig, type }) => {
     const { palette } = styled.useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
-    const { options, style, children: tabs } = elementConfig || {};
+    const { id, options, style, children: tabs } = elementConfig || {};
     const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12 } = options || {};
     const renderIcon = React.useCallback((icon, active) => {
         if (!icon)
@@ -6420,7 +6457,7 @@ const TabsContainer = React.memo(({ elementConfig, type }) => {
             setSelectedTabId(tabs[0].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))) }) }));
+    return (jsxRuntime.jsx(SwiperContainer, { id: id, 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 ContainerIconValue = styled(uilibGl.Flex) ``;
@@ -6526,7 +6563,7 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
         dataSources,
         feature
     });
-    const { options, style, children } = elementConfig || {};
+    const { id, options, style, children } = elementConfig || {};
     const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
     const iconElement = children?.find(({ id }) => id === "icon");
     const aliasElement = children?.find(({ id }) => id === "alias");
@@ -6550,12 +6587,12 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     const renderValue = React.useMemo(() => lodash.isNil(value) ? null : (jsxRuntime.jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsxRuntime.jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (lodash.isNil(value) && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxRuntime.jsxs(RoundedBackgroundContainerWrapper, { id: id, style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxRuntime.jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = React.memo(({ elementConfig }) => {
-    const { children, style } = elementConfig || {};
-    return (jsxRuntime.jsx(Container, { style: style, children: children
+    const { id, children, style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: children
             .filter(({ type }) => type === "button")
             .map(({ options }, index) => (jsxRuntime.jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index))) }));
 });
@@ -6589,15 +6626,15 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
             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, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { id: id, style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
     const { t } = useGlobalContext();
     const { loading, onExport } = useExportPdf(getRootElementId(type));
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { icon, title } = options || {};
-    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, style: style, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
 const containerComponents = {
@@ -6608,7 +6645,6 @@ const containerComponents = {
     [exports.ContainerTemplate.RoundedBackground]: RoundedBackgroundContainer,
     [exports.ContainerTemplate.OneColumn]: OneColumnContainer,
     [exports.ContainerTemplate.TwoColumn]: TwoColumnContainer,
-    [exports.ContainerTemplate.TwoColumnsInner]: TwoColumnsInnerContainer,
     [exports.ContainerTemplate.DataSource]: DataSourceContainer,
     [exports.ContainerTemplate.DataSourceProgress]: DataSourceProgressContainer,
     [exports.ContainerTemplate.Progress]: ProgressContainer,
@@ -7550,6 +7586,169 @@ const ElementLink = React.memo(({ type, elementConfig }) => {
     return link.startsWith("http") ? jsxRuntime.jsx(ExternalLink, { onClick: () => window.open(link) }) : jsxRuntime.jsx(LocalLink, { link: link });
 });
 
+const MarkdownWrapper = styled.div `
+  padding: 0;
+  background: transparent;
+  border-radius: 0.5rem;
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
+
+  /* Paragraphs */
+  p {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    letter-spacing: 0.0052rem;
+    margin: 0 0 1rem 0;
+    font-weight: 400;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  /* Headings */
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 0.75rem 0;
+    font-weight: 300;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    object-fit: cover;
+    margin: 0.75rem 0;
+  }
+
+  /* Links */
+  a {
+    color: ${({ theme: { palette } }) => palette.primary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* Lists */
+  ul, ol {
+    margin: 0 0 1rem 0;
+    padding-left: 1.25rem;
+
+    li {
+      font-size: 0.875rem;
+      line-height: 1rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  /* Code */
+  code {
+    background: ${({ theme: { palette } }) => palette.element};
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: monospace;
+    font-size: 0.8125rem;
+  }
+
+  pre {
+    background: ${({ theme: { palette } }) => palette.element};
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin: 0.75rem 0;
+
+    code {
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+  /* Hide horizontal rules */
+  hr {
+    display: none;
+  }
+`;
+styled(uilibGl.Flex) `
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+`;
+styled.span `
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  opacity: 0.36;
+  margin: 0 0 0.5rem 0;
+`;
+styled.div `
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+const ExpandButton = styled(uilibGl.IconButton) `
+  margin-bottom: 1rem;
+`;
+
+const ElementMarkdown = React.memo(({ elementConfig, type }) => {
+    const { attributes } = useWidgetContext(type);
+    const { t } = useGlobalContext();
+    const [expanded, setExpanded] = React.useState(false);
+    const { attributeName, value, options } = elementConfig || {};
+    const expandLength = options?.expandLength || 0;
+    // Get markdown content from:
+    // 1. value (static content)
+    // 2. attribute by attributeName (dynamic content from data)
+    let content = value;
+    if (!content && attributeName && attributes) {
+        const attribute = attributes.find(attr => attr.name === attributeName);
+        content = attribute?.value;
+    }
+    if (!content)
+        return null;
+    const markdownString = String(content);
+    const shouldShowExpand = expandLength > 0 && markdownString.length > expandLength;
+    // If expand is not needed, show full content
+    if (!shouldShowExpand) {
+        return (jsxRuntime.jsx(MarkdownWrapper, { children: jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }) }));
+    }
+    // Truncated content for collapsed state
+    const truncatedContent = markdownString.substring(0, expandLength);
+    // Collapsed state
+    if (!expanded) {
+        return (jsxRuntime.jsxs(MarkdownWrapper, { children: [jsxRuntime.jsx(ExpandButton, { primary: true, icon: jsxRuntime.jsx(uilibGl.Expander, { isSelected: false }), onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) }), jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent })] }));
+    }
+    // Expanded state
+    return (jsxRuntime.jsxs(MarkdownWrapper, { children: [jsxRuntime.jsx(ExpandButton, { primary: true, icon: jsxRuntime.jsx(uilibGl.Expander, { isSelected: true }), onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) }), jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString })] }));
+});
+
 const SmallPreviewContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -7829,6 +8028,7 @@ const elementComponents = {
     camera: ElementCamera,
     chart: ElementChart,
     legend: ElementLegend,
+    markdown: ElementMarkdown,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -8420,6 +8620,268 @@ const RangeDateFilter = ({ type, filter }) => {
     return (jsxRuntime.jsx(uilibGl.RangeNumberInput, { label: label || t("interval", { ns: "dashboard", defaultValue: "Интервал" }), selectedOption: { range: true }, minDate: getDate(minDate), maxDate: getDate(maxDate), value: [getDate(value[0]), getDate(value[1])], zIndex: 100, prefix: jsxRuntime.jsx(uilibGl.Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsxRuntime.jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
 };
 
+const getJustifyContent = (align) => {
+    switch (align) {
+        case "center":
+            return "center";
+        case "right":
+            return "flex-end";
+        case "left":
+        default:
+            return "flex-start";
+    }
+};
+const ChipsContainer = styled(uilibGl.Flex) `
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  background: transparent;
+  justify-content: ${({ $align }) => getJustifyContent($align)};
+`;
+
+const FilterChip = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3125rem 0.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  background-color: ${({ $isActive, $bgColor, theme }) => $bgColor
+    ? $bgColor
+    : $isActive
+        ? theme.palette?.primary
+        : theme.palette?.elementLight};
+  color: ${({ $isActive, $textColor, theme }) => $textColor
+    ? $textColor
+    : $isActive
+        ? theme.palette?.textContrast
+        : theme.palette?.textSecondary};
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.2s ease-in-out;
+  margin: 0 0.25rem 0 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: ${({ $isActive, $bgColor, theme }) => $isActive
+    ? $bgColor || 'inherit'
+    : $bgColor || theme.palette?.elementDark};
+  }
+`;
+const ChipIconWrapper = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+
+  svg, img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+const ChipText = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  ${({ $maxTextWidth }) => $maxTextWidth && `max-width: ${$maxTextWidth / 16}rem;`}
+`;
+
+const CustomChip = ({ text, icon, color, primary, secondary, error, disabled, isActive, maxTextWidth, fontColor: customFontColor, backgroundColor: customBackgroundColor, ...props }) => {
+    const theme = styled.useTheme();
+    const { palette } = theme;
+    // Helper to add transparency to hex color
+    const addTransparency = (hex, transparency = '1f') => {
+        // Ensure hex starts with #
+        const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
+        return `${cleanHex}${transparency}`;
+    };
+    // Calculate colors based on priority:
+    // 1. customFontColor / customBackgroundColor (highest, from options)
+    // 2. color (from attribute)
+    // 3. primary/secondary/error
+    // 4. default theme colors
+    let bgColor;
+    let textColor;
+    if (isActive) {
+        // Priority 1: Custom colors from options
+        if (customFontColor) {
+            textColor = customFontColor;
+            bgColor = customBackgroundColor || addTransparency(customFontColor); // 12% opacity
+        }
+        // Priority 2: Color from attribute
+        else if (color) {
+            textColor = palette.textPrimary; // White text for active chip
+            bgColor = color; // Full color without transparency
+        }
+        // Priority 3: Variant colors
+        else if (primary) {
+            bgColor = theme.message.color.success; // Green
+            textColor = palette.textContrast;
+        }
+        else if (secondary) {
+            bgColor = palette.primary;
+            textColor = palette.textContrast;
+        }
+        else if (error) {
+            bgColor = theme.message.color.warning; // Yellow
+            textColor = palette.textPrimary;
+        }
+        // Priority 4: Default - no colors specified
+        else {
+            textColor = palette.primary;
+            bgColor = addTransparency(palette.primary); // palette.primary + 12%
+        }
+    }
+    else {
+        // Inactive state
+        if (color) {
+            textColor = color; // Use color for text
+            bgColor = addTransparency(color); // Uses default 1f (12%) transparency
+        }
+        // else: No color attribute - leave bgColor and textColor undefined
+        // Styled component will use fallback for inactive: bg = rgba(0,0,0,0.06), text = palette.textSecondary
+    }
+    const renderIcon = React.useCallback((iconValue) => {
+        if (!iconValue) {
+            return null;
+        }
+        // If icon doesn't contain a dot and doesn't start with /sp/, it's a built-in icon from uilib-gl
+        if (!iconValue.includes(".") && !iconValue.startsWith("/sp/")) {
+            return jsxRuntime.jsx(uilibGl.Icon, { kind: iconValue });
+        }
+        // If it's an SVG file or resourceId path, use SvgImage component
+        const isSvg = iconValue.endsWith(".svg") || iconValue.startsWith("/sp/resources/file/");
+        if (isSvg) {
+            const iconColor = textColor
+                ? textColor
+                : isActive
+                    ? palette.textContrast
+                    : palette.textSecondary;
+            return (jsxRuntime.jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
+        }
+        // Otherwise, it's a regular image
+        return jsxRuntime.jsx("img", { src: iconValue, alt: "" });
+    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
+    return (jsxRuntime.jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsxRuntime.jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsxRuntime.jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
+};
+
+const ChipsFilter = ({ type, filter, elementConfig, }) => {
+    const { filters, dataSources, changeFilters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const theme = styled.useTheme();
+    const { filters: configFilters } = currentPage;
+    const { options } = elementConfig || {};
+    const { align } = options || {};
+    const { filterName, colorAttribute, iconAttribute, maxTextWidth, icon, fontColor, backgroundColor, } = filter.options;
+    const configFilter = getConfigFilter(filterName, configFilters);
+    const multiSelect = configFilter?.valueType === "array";
+    // Process icon URL (resourceId or direct URL)
+    const processedIcon = icon ? getResourceUrl(icon) : undefined;
+    const chipOptions = React.useMemo(() => {
+        if (!configFilter)
+            return [];
+        const dataSource = getDataSource(configFilter.relatedDataSource, dataSources);
+        if (!dataSource?.features)
+            return [];
+        const features = dataSource.features;
+        return features.map(feature => {
+            const attrs = feature.attributes;
+            const text = attrs[configFilter.attributeAlias || DEFAULT_ATTRIBUTE_NAME];
+            const value = attrs[configFilter.attributeValue || DEFAULT_ATTRIBUTE_NAME];
+            const chipIcon = iconAttribute
+                ? getIconFromAttribute(attrs, iconAttribute)
+                : undefined;
+            const chipColor = colorAttribute
+                ? getColorFromAttribute(attrs, colorAttribute, theme)
+                : undefined;
+            return {
+                text,
+                value,
+                color: chipColor,
+                icon: chipIcon,
+            };
+        });
+    }, [configFilter, dataSources, colorAttribute, iconAttribute, theme]);
+    const isChipActive = React.useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        if (currentValue === undefined) {
+            return checkEqualOrIncludes(configFilter?.defaultValue, chipValue);
+        }
+        return checkEqualOrIncludes(currentValue, chipValue);
+    }, [filters, filterName, configFilter]);
+    const handleChipClick = React.useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        let newValue;
+        if (multiSelect) {
+            const currentArray = Array.isArray(currentValue)
+                ? currentValue
+                : currentValue
+                    ? [currentValue]
+                    : [];
+            const valueIndex = currentArray.indexOf(chipValue);
+            if (valueIndex >= 0) {
+                const filtered = currentArray.filter(v => v !== chipValue);
+                if (filtered.length === 0) {
+                    newValue = configFilter?.defaultValue || null;
+                }
+                else {
+                    newValue = filtered;
+                }
+            }
+            else {
+                newValue = [...currentArray, chipValue];
+            }
+        }
+        else {
+            if (currentValue === chipValue) {
+                newValue = configFilter?.defaultValue || null;
+            }
+            else {
+                newValue = chipValue;
+            }
+        }
+        changeFilters({
+            [filterName]: { value: newValue },
+        });
+    }, [filters, filterName, multiSelect, changeFilters, configFilter]);
+    if (!configFilter)
+        return null;
+    return (jsxRuntime.jsx(ChipsContainer, { "$align": align, children: chipOptions.map((chip, index) => {
+            const isActive = isChipActive(chip.value);
+            // Use chip.icon from attribute or fallback to static icon
+            const chipIcon = chip.icon || processedIcon;
+            return (jsxRuntime.jsx(CustomChip, { text: chip.text, icon: chipIcon, color: chip.color, isActive: isActive, maxTextWidth: maxTextWidth, fontColor: fontColor, backgroundColor: backgroundColor, onClick: () => handleChipClick(chip.value), title: chip.text }, index));
+        }) }));
+};
+function getColorFromAttribute(option, colorAttribute, theme) {
+    const value = option[colorAttribute];
+    // If value is already a hex color (starts with #), return it directly
+    if (value && typeof value === 'string' && value.startsWith('#')) {
+        return value;
+    }
+    // Otherwise, map string values to theme colors
+    const colorMap = {
+        active: theme?.message?.color?.success,
+        warning: theme?.message?.color?.warning,
+        info: theme?.message?.color?.info,
+        inactive: theme?.palette?.textDisabled,
+    };
+    return value && typeof value === 'string' ? colorMap[value.toLowerCase()] : undefined;
+}
+function getIconFromAttribute(option, iconAttribute) {
+    const iconValue = option[iconAttribute];
+    if (!iconValue || typeof iconValue !== 'string') {
+        return undefined;
+    }
+    // Process through getResourceUrl to handle both URLs and resourceIds
+    return getResourceUrl(iconValue);
+}
+
 const getFilterComponent = (filterType) => {
     switch (filterType) {
         case "checkbox":
@@ -8432,6 +8894,8 @@ const getFilterComponent = (filterType) => {
             return RangeDateFilter;
         case "text":
             return TextFilter;
+        case "chips":
+            return ChipsFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -8617,7 +9081,9 @@ const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo
     return formatElementValue({ t, value, elementConfig: element, attributes, wrap });
 };
 
-const getResourceUrl = (url) => url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+const getResourceUrl = (url) => {
+    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+};
 
 const getSlideshowImages = ({ element, attribute, }) => {
     const { defaultValue, options } = element;
@@ -9618,7 +10084,7 @@ const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
         }) }));
 });
 
@@ -10169,6 +10635,7 @@ exports.ElementIcon = ElementIcon;
 exports.ElementImage = ElementImage;
 exports.ElementLegend = ElementLegend;
 exports.ElementLink = ElementLink;
+exports.ElementMarkdown = ElementMarkdown;
 exports.ElementSlideshow = ElementSlideshow;
 exports.ElementSvg = ElementSvg;
 exports.ElementTooltip = ElementTooltip;
@@ -10200,7 +10667,6 @@ exports.HeaderTitleContainer = HeaderTitleContainer;
 exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
-exports.InnerContainerWrapper = InnerContainerWrapper$1;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
 exports.Layer = Layer;
 exports.LayerDescription = LayerDescription;
@@ -10251,7 +10717,6 @@ exports.TitleContainer = TitleContainer;
 exports.TopContainer = TopContainer;
 exports.TopContainerButtons = TopContainerButtons;
 exports.TwoColumnContainer = TwoColumnContainer;
-exports.TwoColumnsInnerContainer = TwoColumnsInnerContainer;
 exports.addDataSource = addDataSource;
 exports.addDataSources = addDataSources;
 exports.applyFiltersToCondition = applyFiltersToCondition;