@evergis/react 4.0.55 → 4.0.56

package/dist/components/Dashboard/containers/styled.d.ts

@@ -18,4 +18,9 @@ export declare const SvgContainer: import('styled-components').StyledComponent<"
     $width?: number;
     $fontColor?: string;
 }, never>;
-export declare const TwoColumnContainerWrapper: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
+export declare const TwoColumnContainerWrapper: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    isTitle?: boolean;
+    isColumn?: boolean;
+    isMain?: boolean;
+    noBorders?: boolean;
+}, never>;

package/dist/components/Dashboard/elements/registry.d.ts

@@ -16,5 +16,4 @@ export declare const elementComponents: {
     readonly markdown: import('react').FC<import('..').ContainerProps>;
     readonly uploader: import('react').FC<import('..').ContainerProps>;
     readonly modal: import('react').FC<import('..').ContainerProps>;
-    readonly layerName: import('react').FC<import('..').ContainerProps>;
 };

package/dist/components/Dashboard/headers/FeatureCardDefaultHeader/styled.d.ts

@@ -1,7 +1,7 @@
 export declare const HeaderFrontView: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
     isDefault?: boolean;
 }, never>;
-export declare const HeaderContainer: import('styled-components').StyledComponent<"span", any, import('@evergis/uilib-gl').FlexSpanProps, never>;
+export declare const HeaderContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const FeatureTitleContainer: import('styled-components').StyledComponent<"div", any, {
     clickable?: boolean;
 }, never>;

package/dist/components/Dashboard/headers/FeatureCardGradientHeader/styled.d.ts

@@ -1,4 +1,8 @@
+export declare const HeaderIcon: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const GradientHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
     $fontColor?: string;
     $bgColor?: string;
+    $bigIcon?: boolean;
+    $withPadding?: boolean;
+    $bottomBlur?: boolean;
 }, never>;

package/dist/components/Dashboard/headers/components/HeaderLayerIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const HeaderLayerIcon: FC;

package/dist/components/Dashboard/headers/components/styled.d.ts

@@ -0,0 +1 @@
+export declare const LayerIconClickable: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/Dashboard/headers/index.d.ts

@@ -3,5 +3,4 @@ export * from './DashboardDefaultHeader/styled';
 export * from './FeatureCardDefaultHeader';
 export * from './FeatureCardDefaultHeader/styled';
 export * from './FeatureCardGradientHeader';
-export * from './FeatureCardIconHeader';
 export * from './FeatureCardSlideshowHeader';

package/dist/components/Dashboard/types.d.ts

@@ -84,6 +84,7 @@ export interface ConfigOptions {
     withPadding?: boolean;
     withDivider?: boolean;
     dotSnapping?: boolean;
+    bottomBlur?: boolean;
     tagView?: boolean;
     simple?: boolean;
     downloadById?: string;
@@ -345,8 +346,7 @@ export declare enum ContainerTemplate {
 export declare enum HeaderTemplate {
     Default = "Default",
     Slideshow = "Slideshow",
-    Gradient = "Gradient",
-    Icon = "Icon"
+    Gradient = "Gradient"
 }
 export interface GetRenderElementProps extends Omit<ContainerProps, "renderElement"> {
     expandedContainers?: Record<string, boolean>;

package/dist/components/Dashboard/utils/getThemeByName.d.ts

@@ -0,0 +1,2 @@
+import { ThemeName } from '../../../types';
+export declare const getThemeByName: (themeName: ThemeName) => import('@evergis/uilib-gl').ITheme;

package/dist/components/Dashboard/utils/index.d.ts

@@ -43,6 +43,7 @@ export * from './getSelectedFilterValue';
 export * from './getSlideshowImages';
 export * from './getSvgUrl';
 export * from './getTemplateNameFromAttribute';
+export * from './getThemeByName';
 export * from './getDisplayTemplateNameFromAttribute';
 export * from './getTotalFromAttributes';
 export * from './getTotalFromRelatedFeatures';

package/dist/index.js

@@ -3406,7 +3406,6 @@ exports.HeaderTemplate = void 0;
     HeaderTemplate["Default"] = "Default";
     HeaderTemplate["Slideshow"] = "Slideshow";
     HeaderTemplate["Gradient"] = "Gradient";
-    HeaderTemplate["Icon"] = "Icon";
 })(exports.HeaderTemplate || (exports.HeaderTemplate = {}));
 exports.WidgetType = void 0;
 (function (WidgetType) {
@@ -6034,8 +6033,7 @@ const SvgContainer$1 = styled.div `
     }
   }
 `;
-const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
-  width: 100%;
+const TwoColumnContainerWrapper = styled(Container) `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
@@ -6109,7 +6107,6 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
             if (OverrideContainer) {
                 const itemConfig = {
                     ...elementConfig,
-                    style: { ...BASE_CONTAINER_STYLE, ...elementConfig.style },
                     children: (elementConfig?.children ?? []).map(child => ({
                         ...child,
                         attributeName: attribute,
@@ -6138,7 +6135,7 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }, attribute) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }, attribute)), []);
+    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -8451,10 +8448,10 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
-                            ns: "common",
-                            defaultValue: "Ресурс недоступен",
-                        }) }))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+                                ns: "common",
+                                defaultValue: "Ресурс недоступен",
+                            }) }))] }) }))] }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -8675,17 +8672,17 @@ const HeaderFrontView = styled(uilibGl.Flex) `
   width: 100%;
   font: ${({ theme: { fonts } }) => fonts.subtitle};
 `;
-const HeaderContainer = styled(uilibGl.FlexSpan) `
+const HeaderContainer = styled(uilibGl.Flex) `
   display: flex;
   flex-grow: 1;
   flex-wrap: nowrap;
-  width: calc(100% - 48px);
+  width: calc(100% - 3rem);
 `;
 const FeatureTitleContainer = styled.div `
   display: -webkit-box;
   max-width: 100%;
   width: 100%;
-  margin: 0.5rem 0;
+  margin-top: 0.5rem;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -8741,6 +8738,10 @@ const Header = styled(uilibGl.Flex) `
   ${({ $isRow }) => $isRow && RowHeaderMixin};
 `;
 const DefaultHeaderWrapper = styled.div `
+  padding: 1rem 0 0 1rem;
+  margin: -1rem 0 0 -1rem;
+  background: url(${img$4}) 50% -2rem no-repeat;
+  
   ${Header} {
     padding: 0 1.5rem 1.5rem 0;
   }
@@ -8767,7 +8768,7 @@ const HeaderTitle = ({ noFeature }) => {
                 stringFormat: layerDefinitionAttribute.stringFormat,
             })) ||
             feature?.id);
-    }, [attributes, feature, configuration]);
+    }, [configuration, attributes, t, feature?.id]);
     return (jsxRuntime.jsxs(HeaderTitleContainer, { children: [noFeature ? (jsxRuntime.jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard", defaultValue: "Объектов не найдено" }) })) : (jsxRuntime.jsx(FeatureTitleContainer, { clickable: true, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsxRuntime.jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
@@ -8826,81 +8827,14 @@ const LayerIcon = ({ layerInfo, error }) => {
 };
 
 const FeatureCardDefaultHeader = ({ noFeature }) => {
-    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
-    return (jsxRuntime.jsx(DefaultHeaderWrapper, { children: jsxRuntime.jsx(Header, { "$isRow": true, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: true, children: [jsxRuntime.jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }));
-};
-
-const HeaderFontColorMixin$1 = styled.css `
-  ${HeaderTitleContainer}, ${LayerDescription} {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const HeaderWrapperMixin$1 = styled.css `
-  ${Header} {
-    min-height: 5.25rem;
-  }
-
-  ${HeaderContainer} {
-    max-width: 100%;
-    width: 100%;
-  }
-
-  ${FeatureControls} {
-    max-width: calc(100% - 2rem);
-    width: calc(100% - 2rem);
-    margin-top: -0.5rem;
-    padding-top: 1rem;
-    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
-  }
-
-  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin$1};
-`;
-const GradientHeaderWrapper = styled.div `
-  ${Header} {
-    background: ${({ $bgColor }) => $bgColor || "radial-gradient(129.21% 133.22% at 51.94% 0%, #e8fffe 9.48%, #5fcaff 100%)"};
-  }
-
-  ${HeaderContainer} {
-    align-items: center;
-  }
-
-  ${HeaderTitleContainer} {
-    margin-left: 0;
-    text-align: center;
-  }
-
-  ${FeatureTitleContainer} {
-    text-align: center;
-  }
-
-  ${LayerDescription} {
-    text-align: center;
-  }
-
-  ${HeaderWrapperMixin$1};
-`;
-
-const FeatureCardGradientHeader = ({ isRow }) => {
     const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { fontColor, bgColor } = options || {};
-    const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsx(Header, { "$isRow": isRow, children: jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
-                                        id: "title",
-                                        wrap: false,
-                                    }), description: renderElement({
-                                        id: "description",
-                                        wrap: false,
-                                    }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+    const { themeName } = options || {};
+    return (jsxRuntime.jsx(DefaultHeaderWrapper, { children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$isRow": true, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: true, children: [jsxRuntime.jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
-const LayerIconClickable = styled.div `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
 const HeaderFontColorMixin = styled.css `
   ${HeaderTitleContainer}, ${HeaderTitleContainer} *, ${LayerDescription} {
     color: ${({ $fontColor }) => $fontColor};
@@ -8930,13 +8864,18 @@ const HeaderIcon = styled(uilibGl.Flex) `
   position: absolute;
   top: 0;
   right: 0;
-  justify-content: flex-end;
   align-items: center;
-  min-width: 7.5rem;
+  justify-content: center;
+  width: 7.625rem;
   height: 100%;
 
-  span[kind]:after {
-    font-size: 7.5rem;
+  span[kind] {
+    width: 4rem;
+    
+    :after {
+      font-size: 4rem;
+      color: rgba(255, 255, 255, 0.36);
+    }
   }
 
   span[kind]:after,
@@ -8962,34 +8901,77 @@ const BigIconHeaderMixin = styled.css `
     }
   }
 `;
-const IconHeaderWrapper = styled.div `
+const WithPaddingHeaderMixin = styled.css `
   ${Header} {
-    width: calc(100% + 0.5rem);
-    margin: -1rem -1rem 0.5rem -1rem;
-    padding: 1.5rem;
-    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
+    width: calc(100% - 1rem);
+    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
+  }
+`;
+const BottomBlurHeaderMixin = styled.css `
+  ${Header} {
+    margin-bottom: 0;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 1.5rem;
+      z-index: 11;
+      pointer-events: none;
+      background: ${({ theme: { palette } }) => palette.background};
+      mask-image: linear-gradient(to top, #000 0%, transparent 100%);
+      -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+  }
+
+  ${HeaderFrontView} {
+    z-index: 12;
+  }
+`;
+const GradientHeaderWrapper = styled.div `
+  ${Header} {
+    margin: -1rem -1rem 1rem -1rem;
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
     background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
+    overflow: hidden;
   }
 
   ${HeaderWrapperMixin};
 
   ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
+
+  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
+  
+  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
 `;
 
-const FeatureCardIconHeader = ({ isRow }) => {
+const LayerIconClickable = styled.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const HeaderLayerIcon = () => {
     const { t } = useGlobalContext();
     const { layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
-    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const getMaxZoomTo = useMaxZoomTo();
     const [optionsMaxZoomTo, layerMaxZoomTo] = React.useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
+    const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }) })) }));
+};
+
+const FeatureCardGradientHeader = ({ isRow }) => {
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { fontColor, bgColor, bigIcon } = options || {};
+    const { fontColor, bgColor, bigIcon, withPadding, bottomBlur, themeName } = options || {};
     const renderElement = useHeaderRender(header);
-    const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
-    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }) })) }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: true, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -9860,13 +9842,12 @@ const HeaderSlideshow = styled.div `
 `;
 
 const FeatureCardSlideshowHeader = ({ isRow }) => {
-    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { height, withPadding } = options || {};
+    const { height, withPadding, themeName } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: true, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -10202,13 +10183,6 @@ const ElementModal = React.memo(({ type = exports.WidgetType.Dashboard, elementC
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalIcon, { kind: icon || "new_window", onClick: handleOpen, children: title }), jsxRuntime.jsxs(uilibGl.Dialog, { maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, isOpen: isOpen, modal: true, onCloseRequest: handleClose, style: { paddingBottom: "2rem" }, children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [!!title && jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: handleClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: isLoading ? (jsxRuntime.jsx(DashboardLoading, {})) : (jsxRuntime.jsx(Container, { isColumn: true, noBorders: true, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: modalContent, isMain: true, renderElement: renderElement }) })) })] })] }));
 });
 
-const ElementLayerName = React.memo(({ type }) => {
-    const { layerInfo } = useWidgetContext(type);
-    if (!layerInfo?.name)
-        return null;
-    return jsxRuntime.jsx("span", { children: layerInfo.name });
-});
-
 const elementComponents = {
     control: ElementControl,
     image: ElementImage,
@@ -10225,7 +10199,6 @@ const elementComponents = {
     markdown: ElementMarkdown,
     uploader: ElementUploader,
     modal: ElementModal,
-    layerName: ElementLayerName,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -10259,6 +10232,9 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
                 null
             : null;
     }
+    if (type === "layerName") {
+        return layerInfo?.name || "";
+    }
     const ElementComponent = type ? elementComponents[type] : null;
     return ElementComponent ? (jsxRuntime.jsx(ElementComponent, { ...props })) : (getDefaultContainer?.());
 };
@@ -10315,8 +10291,6 @@ const getFeatureCardHeader = (templateName) => {
             return FeatureCardSlideshowHeader;
         case exports.HeaderTemplate.Gradient:
             return FeatureCardGradientHeader;
-        case exports.HeaderTemplate.Icon:
-            return FeatureCardIconHeader;
         case exports.HeaderTemplate.Default:
         default:
             return FeatureCardDefaultHeader;
@@ -11286,6 +11260,10 @@ const getTemplateNameFromAttribute = (attribute) => {
     }
 };
 
+const getThemeByName = (themeName) => {
+    return themeName === exports.ThemeName.Dark ? uilibGl.darkTheme : uilibGl.defaultTheme;
+};
+
 const getDisplayTemplateNameFromAttribute = (attribute) => {
     if (attribute?.subType === api.StringSubType.Attachments) {
         return exports.ContainerTemplate.Attachment;
@@ -13464,7 +13442,6 @@ exports.FeatureCardContext = FeatureCardContext;
 exports.FeatureCardDefaultHeader = FeatureCardDefaultHeader;
 exports.FeatureCardGradientHeader = FeatureCardGradientHeader;
 exports.FeatureCardHeader = FeatureCardHeader;
-exports.FeatureCardIconHeader = FeatureCardIconHeader;
 exports.FeatureCardProvider = FeatureCardProvider;
 exports.FeatureCardSlideshowHeader = FeatureCardSlideshowHeader;
 exports.FeatureCardTitle = FeatureCardTitle;
@@ -13605,6 +13582,7 @@ exports.getSelectedFilterValue = getSelectedFilterValue;
 exports.getSlideshowImages = getSlideshowImages;
 exports.getSvgUrl = getSvgUrl;
 exports.getTemplateNameFromAttribute = getTemplateNameFromAttribute;
+exports.getThemeByName = getThemeByName;
 exports.getTotalFromAttributes = getTotalFromAttributes;
 exports.getTotalFromRelatedFeatures = getTotalFromRelatedFeatures;
 exports.hexToRgba = hexToRgba;