@evergis/react 3.1.42 → 3.1.47

package/dist/react.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, Expander, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useContext, useMemo, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -20,6 +20,8 @@ import MapGL, { Source, Layer as Layer$1 } from 'react-map-gl/mapbox';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -4446,24 +4448,48 @@ const formatDataSourceCondition = ({ condition, configFilters, filters, attribut
 const DashboardChipsContainer = styled(Flex) `
   flex-wrap: wrap;
 `;
+const DefaultChipColorMixin = css `
+  && {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && > * {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && span[kind]:after {
+    color: ${({ theme: { palette } }) => palette.icon};
+  }
+`;
+const CustomChipColorMixin = css `
+  && {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && > * {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && span[kind]:after {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
 const DashboardChip$1 = styled(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;
     }
   }
@@ -4472,6 +4498,9 @@ const DashboardChip$1 = styled(Chip) `
     width: auto;
     padding: 0 0.5rem;
   }
+
+  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
+  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
 const ChartLegendContainer = styled(Flex) `
@@ -5038,7 +5067,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
     if (!group) {
         return null;
     }
-    return (jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxs(LayerGroupMain, { children: [jsx(Icon, { kind: group.isExpanded ? "tree_folder_open" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxs(Description, { children: [jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsx(IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsx(FlexSpan, { children: jsxs(Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsx(FlexSpan, { children: jsx(IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsx(Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsx(FlexSpan, { children: jsx(IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsx(Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
+    return (jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxs(LayerGroupMain, { children: [jsx(Icon, { kind: group.isExpanded ? "tree_folder_opened" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxs(Description, { children: [jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsx(IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsx(FlexSpan, { children: jsxs(Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsx(FlexSpan, { children: jsx(IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsx(Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsx(FlexSpan, { children: jsx(IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsx(Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
 };
 
 const createTreeNode = (layer, Component, onlyMainTools) => {
@@ -5101,9 +5130,6 @@ const LayerListContainer = styled(Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${transition.toggle};
 `;
-const InnerContainerWrapper$1 = styled.div `
-  width: 100%;
-`;
 const ContainerWrapper = styled(Flex) `
   position: relative;
   min-height: 1rem;
@@ -5446,24 +5472,24 @@ const ContainersGroupContainer = memo(({ elementConfig, type, renderElement }) =
     const { column, expandable, expanded } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { style: style, isColumn: isColumn, children: jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { id: id, style: style, isColumn: isColumn, children: jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const OneColumnContainer = 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 (jsxs(Container, { style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
+    return (jsxs(Container, { id: id, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
 });
 
 const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement }) => {
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
     const renderContainer = 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");
@@ -5501,7 +5527,7 @@ const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement })
         const value = render({ id: "value" });
         if (!value && hideEmpty)
             return null;
-        return (jsxs(TwoColumnContainerWrapper, { style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { children: [hasIcon && jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { children: [hasIcon && jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
     }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type]);
     return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(attribute => renderContainer(elementConfig, attribute)) })) : (renderContainer(elementConfig));
 });
@@ -5692,7 +5718,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
         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");
@@ -5720,7 +5746,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
         return jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { id: id, style: style, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
 const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -5732,7 +5758,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
         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");
@@ -5759,7 +5785,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
     const color = useMemo(() => colorAttribute
         ? attributes?.find(({ name }) => name === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
-    return (jsx(Tooltip$1, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
+    return (jsx(Tooltip$1, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const RANGE_MIN_VALUE = 0;
@@ -5953,7 +5979,7 @@ const FiltersContainer = memo(({ elementConfig, config, type, renderElement }) =
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxs(Fragment$1, { children: [jsx(Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsx(ContainerLoading, {}), !isLoading && isVisible && (jsx(FiltersContainerWrapper, { style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
+    return (jsxs(Fragment$1, { children: [jsx(Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsx(ContainerLoading, {}), !isLoading && isVisible && (jsx(FiltersContainerWrapper, { id: id, style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
 });
 
 const DefaultAttributesContainer = memo(({ type, renderElement }) => {
@@ -5962,7 +5988,7 @@ const DefaultAttributesContainer = memo(({ type, renderElement }) => {
 });
 
 const ChartContainer = 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");
@@ -5977,7 +6003,7 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxs(FlexSpan, { flexDirection: "column", children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, style: style, isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
@@ -6013,10 +6039,6 @@ const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
     return (jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
-const TwoColumnsInnerContainer = memo(({ renderElement }) => {
-    return (jsxs(Fragment$1, { children: [jsxs(TwoColumnContainerWrapper, { children: [jsxs(Container, { children: [jsx(ContainerAlias, { children: renderElement({ id: "firstAlias" }) }), jsx(ContainerValue, { big: true, children: renderElement({ id: "firstValue" }) })] }), jsxs(Container, { children: [jsx(ContainerAlias, { children: renderElement({ id: "secondAlias" }) }), jsx(ContainerValue, { big: true, children: renderElement({ id: "secondValue" }) })] })] }), renderElement({ id: "thirdContainer" })] }));
-});
-
 const ImageContainerBg$1 = styled.div `
   position: absolute;
   top: 0;
@@ -6078,8 +6100,8 @@ const ImageContainerWrapper = styled(Flex) `
 `;
 
 const ImageContainer = memo(({ elementConfig, renderElement }) => {
-    const { style } = elementConfig || {};
-    return (jsxs(ImageContainerWrapper, { style: style, children: [jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxs(ImageContainerWrapper, { id: id, style: style, children: [jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
 });
 
 const IconContainerWrapper = styled(Flex) `
@@ -6131,7 +6153,8 @@ const IconContainerText = styled.div `
 `;
 
 const IconContainer = memo(({ elementConfig, renderElement }) => {
-    return (jsxs(IconContainerWrapper, { style: elementConfig?.style, children: [jsxs(IconContainerHeaderWrapper, { children: [jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxs(IconContainerWrapper, { id: id, style: style, children: [jsxs(IconContainerHeaderWrapper, { children: [jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
 });
 
 const DataSourceContainer = memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
@@ -6146,7 +6169,7 @@ const DataSourceContainer = memo(({ config, elementConfig, type, innerComponent,
         return jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isLoading = !dataSource?.features;
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsx(Container, { isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsx(ContainerLoading, {}))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsx(Container, { id: id, isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = css `
@@ -6172,12 +6195,25 @@ const SvgContainer = styled.div `
 const ContainerIconTitle = styled(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;
   }
 
@@ -6243,7 +6279,7 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const { expandContainer, expandedContainers, setDashboardLayer } = useWidgetContext(type);
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = useTheme();
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { simple, downloadById } = options || {};
     const isLayers = templateName === ContainerTemplate.Layers;
     const { onExport } = useExportPdf(downloadById);
@@ -6261,7 +6297,7 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const renderVisibility = useMemo(() => isLayers && (jsx(FlexSpan, { mr: "-1rem", children: jsx(IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = useMemo(() => !!containerId &&
         expandable && (jsx("div", { children: jsx(LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsx(Container, { isTitle: isVisible, style: style, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsx(IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsx(IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(Divider) `
@@ -6270,7 +6306,8 @@ const ContainerDivider = styled(Divider) `
 `;
 
 const DividerContainer = memo(({ elementConfig, config }) => {
-    return (jsx(Container, { style: elementConfig?.style, children: jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
+    const { id, style } = elementConfig || {};
+    return (jsx(Container, { id: id, style: style, children: jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
 });
 
 const SlideshowContainer = memo(({ config, elementConfig, type }) => {
@@ -6280,7 +6317,7 @@ const SlideshowContainer = 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 = useMemo(() => getRenderElement({
@@ -6305,7 +6342,7 @@ const SlideshowContainer = memo(({ config, elementConfig, type }) => {
         pageIndex,
         type,
     ]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxs(Container, { style: elementConfig?.style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsx(ContainerValue, { children: render({
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxs(Container, { style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -6316,7 +6353,7 @@ const CameraContainer = memo(({ elementConfig, type, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -6400,7 +6437,7 @@ const SwiperContainer = styled.div `
 const TabsContainer = memo(({ elementConfig, type }) => {
     const { palette } = 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 = useCallback((icon, active) => {
         if (!icon)
@@ -6418,7 +6455,7 @@ const TabsContainer = memo(({ elementConfig, type }) => {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsx(SwiperContainer, { style: style, children: jsx(Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxs(SwiperSlide, { children: [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 && (jsx(TabValue, { children: jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsx(TabAnchor, { id: id })] }, id))) }) }));
+    return (jsx(SwiperContainer, { id: id, style: style, children: jsx(Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxs(SwiperSlide, { children: [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 && (jsx(TabValue, { children: jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsx(TabAnchor, { id: id })] }, id))) }) }));
 });
 
 const ContainerIconValue = styled(Flex) ``;
@@ -6524,7 +6561,7 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
         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");
@@ -6548,12 +6585,12 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
     const renderValue = useMemo(() => isNil(value) ? null : (jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (isNil(value) && hideEmpty)
         return null;
-    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxs(RoundedBackgroundContainerWrapper, { id: id, style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = memo(({ elementConfig }) => {
-    const { children, style } = elementConfig || {};
-    return (jsx(Container, { style: style, children: children
+    const { id, children, style } = elementConfig || {};
+    return (jsx(Container, { id: id, style: style, children: children
             .filter(({ type }) => type === "button")
             .map(({ options }, index) => (jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index))) }));
 });
@@ -6587,15 +6624,15 @@ const LayersContainer = memo(({ type, elementConfig, renderElement }) => {
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(LayersContainerWrapper, { style: style, children: jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(LayersContainerWrapper, { id: id, style: style, children: jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = 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 (jsx(Container, { children: jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, style: style, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
+    return (jsx(Container, { id: id, style: style, children: jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
 const containerComponents = {
@@ -6606,7 +6643,6 @@ const containerComponents = {
     [ContainerTemplate.RoundedBackground]: RoundedBackgroundContainer,
     [ContainerTemplate.OneColumn]: OneColumnContainer,
     [ContainerTemplate.TwoColumn]: TwoColumnContainer,
-    [ContainerTemplate.TwoColumnsInner]: TwoColumnsInnerContainer,
     [ContainerTemplate.DataSource]: DataSourceContainer,
     [ContainerTemplate.DataSourceProgress]: DataSourceProgressContainer,
     [ContainerTemplate.Progress]: ProgressContainer,
@@ -7548,6 +7584,169 @@ const ElementLink = memo(({ type, elementConfig }) => {
     return link.startsWith("http") ? jsx(ExternalLink, { onClick: () => window.open(link) }) : 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(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(IconButton) `
+  margin-bottom: 1rem;
+`;
+
+const ElementMarkdown = memo(({ elementConfig, type }) => {
+    const { attributes } = useWidgetContext(type);
+    const { t } = useGlobalContext();
+    const [expanded, setExpanded] = 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 (jsx(MarkdownWrapper, { children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }) }));
+    }
+    // Truncated content for collapsed state
+    const truncatedContent = markdownString.substring(0, expandLength);
+    // Collapsed state
+    if (!expanded) {
+        return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: false }), onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent })] }));
+    }
+    // Expanded state
+    return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: true }), onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString })] }));
+});
+
 const SmallPreviewContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -7827,6 +8026,7 @@ const elementComponents = {
     camera: ElementCamera,
     chart: ElementChart,
     legend: ElementLegend,
+    markdown: ElementMarkdown,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -8418,6 +8618,268 @@ const RangeDateFilter = ({ type, filter }) => {
     return (jsx(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: jsx(Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && 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(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 = 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 = 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 jsx(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 (jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
+        }
+        // Otherwise, it's a regular image
+        return jsx("img", { src: iconValue, alt: "" });
+    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
+    return (jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
+};
+
+const ChipsFilter = ({ type, filter, elementConfig, }) => {
+    const { filters, dataSources, changeFilters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const theme = 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 = 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 = useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        if (currentValue === undefined) {
+            return checkEqualOrIncludes(configFilter?.defaultValue, chipValue);
+        }
+        return checkEqualOrIncludes(currentValue, chipValue);
+    }, [filters, filterName, configFilter]);
+    const handleChipClick = 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 (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 (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":
@@ -8430,6 +8892,8 @@ const getFilterComponent = (filterType) => {
             return RangeDateFilter;
         case "text":
             return TextFilter;
+        case "chips":
+            return ChipsFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -8615,7 +9079,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;
@@ -9616,7 +10082,7 @@ const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
+            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(Fragment, { children: render }, index));
         }) }));
 });
 
@@ -10105,5 +10571,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, InnerContainerWrapper$1 as InnerContainerWrapper, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, TwoColumnsInnerContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map