datastake-daf 0.6.147 → 0.6.149

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$r = ["width", "height", "size", "name", "fill"];
+const _excluded$q = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3074,7 +3074,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   const conf = config$3[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -9276,7 +9276,7 @@ createCommonjsModule(function (module, exports) {
 !function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
 });
 
-const _excluded$q = ["view", "module", "scope", "form", "meta"];
+const _excluded$p = ["view", "module", "scope", "form", "meta"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -9650,7 +9650,7 @@ const filterCreateData = data => {
       form,
       meta
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$q);
+    rest = _objectWithoutProperties(data, _excluded$p);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10035,7 +10035,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$p = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
+const _excluded$o = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
 function DAFTable(_ref) {
   let {
       columns = [],
@@ -10066,7 +10066,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -10788,7 +10788,7 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-const _excluded$o = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$n = ["size", "maxHeight", "dataSource", "columns", "pagination"];
 function StickyTable(_ref) {
   let {
       size = null,
@@ -10797,7 +10797,7 @@ function StickyTable(_ref) {
       columns = {},
       pagination = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11262,7 +11262,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$n = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$m = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11276,7 +11276,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$n);
+    restProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11510,12 +11510,12 @@ const Style$H = dt.div`
   }
 `;
 
-const _excluded$m = ["children"];
+const _excluded$l = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11524,7 +11524,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$c;
+var _templateObject$b;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11642,7 +11642,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$G = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11655,12 +11655,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$l = ["icon"];
+const _excluded$k = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11982,9 +11982,9 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$k = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$j = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
-  useToken: useToken$i
+  useToken: useToken$j
 } = antd.theme;
 
 /**
@@ -12075,10 +12075,10 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$k);
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
   const {
     token
-  } = useToken$i();
+  } = useToken$j();
   const [selectValue, setSelectValue] = React.useState(Array.isArray(defaultSelected) ? defaultSelected.length > 0 ? defaultSelected : [] : [defaultSelected]);
   function onSelectChange(value) {
     if (!canUnselectLast && value.length === 0) {
@@ -12582,7 +12582,7 @@ const useHeader = _ref => {
 };
 
 const {
-  useToken: useToken$h
+  useToken: useToken$i
 } = antd.theme;
 function BreadCrumbs({
   breadcrumbs = [],
@@ -12591,7 +12591,7 @@ function BreadCrumbs({
   const [splitIndex, setSplitIndex] = React.useState(0);
   const {
     token
-  } = useToken$h();
+  } = useToken$i();
   const _renderBreadcrumb = (b, i, isLast, noOnClickLast = false) => {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex breadcrumb-item",
@@ -12742,7 +12742,7 @@ DAFHeader.propTypes = {
   downloadDisabled: PropTypes__default["default"].any
 };
 
-const _excluded$j = ["tabs", "onChange", "value", "className"];
+const _excluded$i = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12750,7 +12750,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -12847,16 +12847,14 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$i = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
-const useFooter = _ref => {
-  let {
-    leftContent,
-    centerContent,
-    rightContent,
-    actionButtons,
-    app,
-    isViewMode
-  } = _ref;
+const useFooter = ({
+  leftContent,
+  centerContent,
+  rightContent,
+  actionButtons,
+  app,
+  isViewMode
+}) => {
   const renderFooterContent = React.useMemo(() => {
     const FooterContent = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "daf-footer-content",
@@ -12872,18 +12870,18 @@ const useFooter = _ref => {
           className: "daf-footer-actions",
           children: actionButtons.map((button, index) => {
             const {
-                label,
-                onClick,
-                icon,
-                type = BTN_TYPES.PRIMARY,
-                tooltip,
-                disabled = false,
-                loading = false,
-                style = {},
-                className = ""
-              } = button,
-              restProps = _objectWithoutProperties(button, _excluded$i);
-            return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
+              label,
+              onClick,
+              icon,
+              type = BTN_TYPES.PRIMARY,
+              tooltip,
+              disabled = false,
+              loading = false,
+              style = {},
+              className = "",
+              ...restProps
+            } = button;
+            return /*#__PURE__*/jsxRuntime.jsx(DafButton, {
               content: label,
               type: type,
               size: BTN_SIZE.MD,
@@ -12895,8 +12893,9 @@ const useFooter = _ref => {
               loading: loading,
               title: tooltip,
               style: style,
-              className: className
-            }, restProps), index);
+              className: className,
+              ...restProps
+            }, index);
           })
         })]
       })]
@@ -12909,8 +12908,180 @@ const useFooter = _ref => {
   };
 };
 
-var _templateObject$b;
-const FooterContainer = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\t.daf-footer {\n\t\tbackground: #ffffff;\n\t\tborder-top: 1px solid #e8e8e8;\n\t\tborder-left: none;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t\tborder-radius: 0;\n\t\tpadding: 24px;\n\t\tmargin: 0;\n\t\tbox-shadow: none;\n\t\tz-index: 100;\n\t\tposition: relative;\n\t\tmin-height: 80px;\n\n\t\t&.daf-footer-fixed {\n\t\t\tposition: fixed;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tz-index: 1000;\n\t\t}\n\n\t\t.daf-footer-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t\tmin-height: 32px;\n\n\t\t\t.daf-footer-left {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t}\n\n\t\t\t.daf-footer-center {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\t.daf-footer-right {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: 12px;\n\n\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t.ant-btn {\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tpadding: 0 24px;\n\t\t\t\t\t\tborder-radius: 6px;\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\tborder: 1px solid transparent;\n\n\t\t\t\t\t\t&.ant-btn-primary {\n\t\t\t\t\t\t\tbackground-color: var(--color-primary-70);\n\t\t\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-60);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-60);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-default {\n\t\t\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-ghost {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t\tbackground: rgba(0, 0, 0, 0.02);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Responsive design */\n\t@media (max-width: 768px) {\n\t\t.daf-footer {\n\t\t\tmargin: 0;\n\t\t\tpadding: 16px;\n\n\t\t\t.daf-footer-content {\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 16px;\n\t\t\t\talign-items: stretch;\n\n\t\t\t\t.daf-footer-left,\n\t\t\t\t.daf-footer-center,\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\tflex: none;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* App-specific styling */\n\t&.sbg-app {\n\t\t.daf-footer {\n\t\t\tbackground: #f8f9fa;\n\t\t\tborder-color: #e9ecef;\n\t\t}\n\t}\n\n\t&.nashiriki-app {\n\t\t.daf-footer {\n\t\t\tbackground: #fff;\n\t\t\tborder-color: #d9d9d9;\n\t\t}\n\t}\n"])));
+const FooterContainer = dt.div`
+	.daf-footer {
+		background: #ffffff;
+		border-top: 1px solid #e8e8e8;
+		border-left: none;
+		border-right: none;
+		border-bottom: none;
+		border-radius: 0;
+		padding: 24px;
+		margin: 0;
+		box-shadow: none;
+		z-index: 100;
+		position: relative;
+		min-height: 80px;
+
+		&.daf-footer-fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 1000;
+		}
+
+		.daf-footer-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			min-height: 32px;
+
+			.daf-footer-left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+			}
+
+			.daf-footer-center {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.daf-footer-right {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				gap: 12px;
+
+				.daf-footer-actions {
+					.ant-btn {
+						height: 40px;
+						padding: 0 24px;
+						border-radius: 6px;
+						font-weight: 500;
+						font-size: 14px;
+						transition: all 0.3s ease;
+						border: 1px solid transparent;
+
+						&.ant-btn-primary {
+							background-color: var(--color-primary-70);
+							color: #ffffff;
+							border-color: var(--color-primary-70);
+
+							&:hover {
+								background-color: var(--color-primary-60);
+								border-color: var(--color-primary-60);
+							}
+
+							&:active {
+								background-color: var(--color-primary-80);
+								border-color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								background-color: #f5f5f5;
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+
+						&.ant-btn-default {
+							background: #ffffff;
+							color: #666666;
+							border-color: #d9d9d9;
+
+							&:hover {
+								border-color: var(--color-primary-70);
+								color: var(--color-primary-70);
+							}
+
+							&:active {
+								border-color: var(--color-primary-80);
+								color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								background-color: #f5f5f5;
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+
+						&.ant-btn-ghost {
+							background: transparent;
+							color: #666666;
+							border-color: #d9d9d9;
+
+							&:hover {
+								border-color: var(--color-primary-70);
+								color: var(--color-primary-70);
+								background: rgba(0, 0, 0, 0.02);
+							}
+
+							&:active {
+								border-color: var(--color-primary-80);
+								color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.daf-footer {
+			margin: 0;
+			padding: 16px;
+
+			.daf-footer-content {
+				flex-direction: column;
+				gap: 16px;
+				align-items: stretch;
+
+				.daf-footer-left,
+				.daf-footer-center,
+				.daf-footer-right {
+					flex: none;
+					justify-content: center;
+				}
+
+				.daf-footer-right {
+					.daf-footer-actions {
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+
+	/* App-specific styling */
+	&.sbg-app {
+		.daf-footer {
+			background: #f8f9fa;
+			border-color: #e9ecef;
+		}
+	}
+
+	&.nashiriki-app {
+		.daf-footer {
+			background: #fff;
+			border-color: #d9d9d9;
+		}
+	}
+`;
 
 function DAFFooter(_ref) {
   let {
@@ -15186,6 +15357,7 @@ Loader.propTypes = {
 function Widget(_ref) {
   let {
     title = "",
+    noTitle = false,
     children,
     addedHeader = null,
     tooltip,
@@ -15234,7 +15406,7 @@ function Widget(_ref) {
     className: formatClassname(["daf-widget", "flex-1", className, !!tabsConfig && "with-tabs", isCollapsable && isCollapsed && "collapsed-widget"]),
     children: [loading && fullWidgetLoading && /*#__PURE__*/jsxRuntime.jsx(Loader, {
       background: "white"
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }), !noTitle && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "widget-header flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row widget-header-items",
@@ -15291,17 +15463,16 @@ function Widget(_ref) {
               icon: !isExpanded ? /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {
                 style: {
                   width: 10,
-                  paddingTop: '4px'
+                  paddingTop: "4px"
                 }
-              })
-              //<PlusOutlined style={{width: 10}} />
-              :
+              }) :
               /*#__PURE__*/
+              //<PlusOutlined style={{width: 10}} />
               //<MinusOutlined style={{ width: 10 }} />
               jsxRuntime.jsx(Icons.DownOutlined, {
                 style: {
                   width: 10,
-                  paddingTop: '4px'
+                  paddingTop: "4px"
                 }
               })
             })
@@ -15812,17 +15983,19 @@ function KeyIndicatorsWidget$1(_ref) {
     withTooltip = false,
     title = "Key Indicators",
     noMinWidth = false,
-    children
+    children,
+    noTitle = false
   } = _ref;
   const component = /*#__PURE__*/jsxRuntime.jsxs(Widget, {
     loading: loading,
     className: formatClassname(["flex-1 with-border-header", widgetClassName]),
-    title: t(title),
+    title: noTitle ? undefined : t(title),
+    noTitle: noTitle,
     children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$E, {
       className: formatClassname(["flex", className]),
       children: config.map((c, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "row-item",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, {
           label: c.label,
           withTooltip: withTooltip
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -15839,7 +16012,7 @@ function KeyIndicatorsWidget$1(_ref) {
   }
   return component;
 }
-function Label(_ref2) {
+function Label$1(_ref2) {
   let {
     label,
     withTooltip
@@ -18457,17 +18630,6 @@ const Style$z = dt.div`
   position: relative;
   width: 100%;
   height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
 
   .filter-cont {
     position: absolute; 
@@ -19312,11 +19474,6 @@ const useGlobe = ({
         }
       });
       setMapMarkers(newMarkers);
-
-      // Resize the Mapbox GL JS map to ensure proper rendering after data changes
-      if (mapRef && mapRef.resize) {
-        mapRef.resize();
-      }
     }
   }, []);
   const createInstance = React.useCallback(() => {
@@ -19462,47 +19619,6 @@ const useGlobe = ({
       const instance = createInstance();
       if (instance) {
         setMapRef(instance);
-
-        // Add comprehensive resize detection for Mapbox GL JS responsiveness
-        const handleResize = () => {
-          if (instance && instance.resize) {
-            // Add a small delay to ensure DOM has updated
-            setTimeout(() => {
-              instance.resize();
-            }, 100);
-          }
-        };
-
-        // Listen to window resize
-        window.addEventListener('resize', handleResize);
-
-        // Listen to container size changes using ResizeObserver
-        const resizeObserver = new ResizeObserver(() => {
-          handleResize();
-        });
-        if (container.current) {
-          resizeObserver.observe(container.current);
-        }
-
-        // Store handlers for cleanup
-        instance._resizeHandler = handleResize;
-        instance._resizeObserver = resizeObserver;
-
-        // Add IntersectionObserver to detect when globe becomes visible (handles sidenav scenarios)
-        const intersectionObserver = new IntersectionObserver(entries => {
-          entries.forEach(entry => {
-            if (entry.isIntersecting && instance && instance.resize) {
-              // Globe container is visible, force resize after a delay
-              setTimeout(() => {
-                instance.resize();
-              }, 200);
-            }
-          });
-        });
-        if (container.current) {
-          intersectionObserver.observe(container.current);
-        }
-        instance._intersectionObserver = intersectionObserver;
       } else {
         console.log('❌ [GLOBE HOOK] Failed to create map instance');
       }
@@ -19583,33 +19699,6 @@ const useGlobe = ({
       addAllDataToMap();
     }
   }, [data, mapRef, initialMarkerSetIsDone]);
-
-  // Add effect to handle layout changes (like sidenav opening/closing)
-  React.useEffect(() => {
-    if (mapRef) {
-      // Force resize when component becomes visible or layout changes
-      const handleLayoutChange = () => {
-        if (mapRef && mapRef.resize) {
-          setTimeout(() => {
-            mapRef.resize();
-          }, 150);
-        }
-      };
-
-      // Listen for visibility changes
-      document.addEventListener('visibilitychange', handleLayoutChange);
-
-      // Listen for focus events (when user returns to tab)
-      window.addEventListener('focus', handleLayoutChange);
-
-      // Store handlers for cleanup
-      mapRef._layoutChangeHandler = handleLayoutChange;
-      return () => {
-        document.removeEventListener('visibilitychange', handleLayoutChange);
-        window.removeEventListener('focus', handleLayoutChange);
-      };
-    }
-  }, [mapRef]);
   React.useEffect(() => {
     if (activeMarker && mapRef) {
       const marker = mapMarkers.find(m => m.data === activeMarker);
@@ -19625,21 +19714,6 @@ const useGlobe = ({
     return () => {
       isMounted.current = false;
 
-      // Cleanup window resize listener and ResizeObserver for Mapbox GL JS
-      if (mapRef && mapRef._resizeHandler) {
-        window.removeEventListener('resize', mapRef._resizeHandler);
-      }
-      if (mapRef && mapRef._resizeObserver) {
-        mapRef._resizeObserver.disconnect();
-      }
-      if (mapRef && mapRef._layoutChangeHandler) {
-        document.removeEventListener('visibilitychange', mapRef._layoutChangeHandler);
-        window.removeEventListener('focus', mapRef._layoutChangeHandler);
-      }
-      if (mapRef && mapRef._intersectionObserver) {
-        mapRef._intersectionObserver.disconnect();
-      }
-
       // Defer unmounting to avoid race conditions
       const rootsToUnmount = [...roots.current];
       roots.current = [];
@@ -19655,7 +19729,7 @@ const useGlobe = ({
         });
       });
     };
-  }, [mapRef]);
+  }, []);
 
   // Map control handlers
   const zoomHandler = React.useCallback(() => mapRef?.zoomIn(), [mapRef]);
@@ -19736,22 +19810,12 @@ const useGlobe = ({
     }),
     handler: moveDownHandler
   }], [zoomHandler, zoomOutHandler, recenterMap, moveUpHandler, moveDownHandler]);
-
-  // Expose a manual resize method for external triggers
-  const forceResize = React.useCallback(() => {
-    if (mapRef && mapRef.resize) {
-      setTimeout(() => {
-        mapRef.resize();
-      }, 100);
-    }
-  }, [mapRef]);
   return {
     container,
     activeMarker,
     mapOptionsButtonsConfig,
     emptyStateIsVisible,
-    setEmptyStateIsVisible,
-    forceResize
+    setEmptyStateIsVisible
   };
 };
 
@@ -19799,8 +19863,7 @@ function Globe(_ref) {
   const {
     container,
     activeMarker,
-    mapOptionsButtonsConfig,
-    forceResize
+    mapOptionsButtonsConfig
   } = useGlobe({
     data: mappedData,
     user,
@@ -19827,17 +19890,6 @@ function Globe(_ref) {
   React.useEffect(() => {
     onRender === null || onRender === void 0 || onRender();
   }, [onRender]);
-
-  // Force resize when component becomes visible (handles sidenav open/close scenarios)
-  React.useEffect(() => {
-    if (forceResize) {
-      // Trigger resize after component mounts
-      const timer = setTimeout(() => {
-        forceResize();
-      }, 300);
-      return () => clearTimeout(timer);
-    }
-  }, [forceResize]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Style$z, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
@@ -20231,7 +20283,7 @@ const DetailsSection = _ref => {
   });
 };
 
-const KEYS = {
+const SDG_KEYS = {
   NO_POVERTY: "noPoverty",
   ZERO_HUNGER: "zeroHunger",
   GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
@@ -20250,75 +20302,146 @@ const KEYS = {
   PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
   PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals"
 };
+const SDG_IMAGES = {
+  [SDG_KEYS.NO_POVERTY]: {
+    img: "/SDGs/SDGs.svg",
+    disabled: "/SDGs/SDGs-17.svg"
+  },
+  [SDG_KEYS.ZERO_HUNGER]: {
+    img: "/SDGs/SDGs-1.svg",
+    disabled: "/SDGs/SDGs-18.svg"
+  },
+  [SDG_KEYS.GOOD_HEALTH_WELL_BEING]: {
+    img: "/SDGs/SDGs-2.svg",
+    disabled: "/SDGs/SDGs-19.svg"
+  },
+  [SDG_KEYS.QUALITY_EDUCATION]: {
+    img: "/SDGs/SDGs-3.svg",
+    disabled: "/SDGs/SDGs-20.svg"
+  },
+  [SDG_KEYS.GENDER_EQUALITY]: {
+    img: "/SDGs/SDGs-4.svg",
+    disabled: "/SDGs/SDGs-21.svg"
+  },
+  [SDG_KEYS.CLEAN_WATER_SANITATION]: {
+    img: "/SDGs/SDGs-5.svg",
+    disabled: "/SDGs/SDGs-22.svg"
+  },
+  [SDG_KEYS.AFFORDABLE_CLEAN_ENERGY]: {
+    img: "/SDGs/SDGs-6.svg",
+    disabled: "/SDGs/SDGs-23.svg"
+  },
+  [SDG_KEYS.DECENT_WORK_ECONOMIC_GROWTH]: {
+    img: "/SDGs/SDGs-7.svg",
+    disabled: "/SDGs/SDGs-24.svg"
+  },
+  [SDG_KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE]: {
+    img: "/SDGs/SDGs-8.svg",
+    disabled: "/SDGs/SDGs-25.svg"
+  },
+  [SDG_KEYS.REDUCED_INEQUALITIES]: {
+    img: "/SDGs/SDGs-9.svg",
+    disabled: "/SDGs/SDGs-26.svg"
+  },
+  [SDG_KEYS.SUSTAINABLE_CITIES_COMMUNITIES]: {
+    img: "/SDGs/SDGs-10.svg",
+    disabled: "/SDGs/SDGs-27.svg"
+  },
+  [SDG_KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION]: {
+    img: "/SDGs/SDGs-11.svg",
+    disabled: "/SDGs/SDGs-29.svg"
+  },
+  [SDG_KEYS.CLIMATE_ACTION]: {
+    img: "/SDGs/SDGs-12.svg",
+    disabled: "/SDGs/SDGs-30.svg"
+  },
+  [SDG_KEYS.LIFE_BELOW_WATER]: {
+    img: "/SDGs/SDGs-13.svg",
+    disabled: "/SDGs/SDGs-31.svg"
+  },
+  [SDG_KEYS.LIFE_ON_LAND]: {
+    img: "/SDGs/SDGs-14.svg",
+    disabled: "/SDGs/SDGs-32.svg"
+  },
+  [SDG_KEYS.PEACE_JUSTICE_STRONG_INSTITUTIONS]: {
+    img: "/SDGs/SDGs-15.svg",
+    disabled: "/SDGs/SDGs-33.svg"
+  },
+  [SDG_KEYS.PARTNERSHIPS_FOR_GOALS]: {
+    img: "/SDGs/SDGs-16.svg",
+    disabled: "/SDGs/SDGs-34.svg"
+  }
+};
+
 const getGoalConfig = () => {
   return [{
     img: "/SDGs/SDGs.svg",
-    key: KEYS.NO_POVERTY,
-    disabled: "/SDGs/SDGs-17.svg"
+    key: SDG_KEYS.NO_POVERTY,
+    disabled: "./SDGs/SDGs-17.svg"
   }, {
     img: "/SDGs/SDGs-1.svg",
-    key: KEYS.ZERO_HUNGER,
-    disabled: "/SDGs/SDGs-18.svg"
+    key: SDG_KEYS.ZERO_HUNGER,
+    disabled: "./SDGs/SDGs-18.svg"
   }, {
     img: "/SDGs/SDGs-2.svg",
-    key: KEYS.GOOD_HEALTH_WELL_BEING,
+    key: SDG_KEYS.GOOD_HEALTH_WELL_BEING,
     disabled: "/SDGs/SDGs-19.svg"
   }, {
     img: "/SDGs/SDGs-3.svg",
-    key: KEYS.QUALITY_EDUCATION,
+    key: SDG_KEYS.QUALITY_EDUCATION,
     disabled: "/SDGs/SDGs-20.svg"
   }, {
     img: "/SDGs/SDGs-4.svg",
-    key: KEYS.GENDER_EQUALITY,
+    key: SDG_KEYS.GENDER_EQUALITY,
     disabled: "/SDGs/SDGs-21.svg"
   }, {
     img: "/SDGs/SDGs-5.svg",
-    key: KEYS.CLEAN_WATER_SANITATION,
+    key: SDG_KEYS.CLEAN_WATER_SANITATION,
     disabled: "/SDGs/SDGs-22.svg"
   }, {
     img: "/SDGs/SDGs-6.svg",
-    key: KEYS.AFFORDABLE_CLEAN_ENERGY,
+    key: SDG_KEYS.AFFORDABLE_CLEAN_ENERGY,
     disabled: "/SDGs/SDGs-23.svg"
   }, {
     img: "/SDGs/SDGs-7.svg",
-    key: KEYS.DECENT_WORK_ECONOMIC_GROWTH,
+    key: SDG_KEYS.DECENT_WORK_ECONOMIC_GROWTH,
     disabled: "/SDGs/SDGs-24.svg"
   }, {
     img: "/SDGs/SDGs-8.svg",
-    key: KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE,
+    key: SDG_KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE,
     disabled: "/SDGs/SDGs-25.svg"
   }, {
     img: "/SDGs/SDGs-9.svg",
-    key: KEYS.REDUCED_INEQUALITIES,
+    key: SDG_KEYS.REDUCED_INEQUALITIES,
     disabled: "/SDGs/SDGs-26.svg"
   }, {
     img: "/SDGs/SDGs-10.svg",
-    key: KEYS.PARTNERSHIPS_FOR_GOALS,
+    key: SDG_KEYS.PARTNERSHIPS_FOR_GOALS,
     disabled: "/SDGs/SDGs-27.svg"
   }, {
     img: "/SDGs/SDGs-11.svg",
-    key: KEYS.SUSTAINABLE_CITIES_COMMUNITIES,
+    key: SDG_KEYS.SUSTAINABLE_CITIES_COMMUNITIES,
     disabled: "/SDGs/SDGs-28.svg"
   }, {
     img: "/SDGs/SDGs-12.svg",
-    key: KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION,
+    key: SDG_KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION,
     disabled: "/SDGs/SDGs-29.svg"
   }, {
     img: "/SDGs/SDGs-13.svg",
-    key: KEYS.CLIMATE_ACTION,
+    key: SDG_KEYS.CLIMATE_ACTION,
     disabled: "/SDGs/SDGs-30.svg"
   }, {
     img: "/SDGs/SDGs-14.svg",
-    key: KEYS.LIFE_BELOW_WATER,
+    key: SDG_KEYS.LIFE_BELOW_WATER,
     disabled: "/SDGs/SDGs-31.svg"
   }, {
     img: "/SDGs/SDGs-15.svg",
-    key: KEYS.LIFE_ON_LAND,
+    key: SDG_KEYS.LIFE_ON_LAND,
     disabled: "/SDGs/SDGs-32.svg"
   }, {
     img: "/SDGs/SDGs-16.svg",
     disabled: "/SDGs/SDGs-33.svg",
-    key: KEYS.PEACE_JUSTICE_STRONG_INSTITUTIONS
+    key: SDG_KEYS.PEACE_JUSTICE_STRONG_INSTITUTIONS
   }];
 };
 
@@ -20348,7 +20471,160 @@ function SDGWidget(_ref) {
     })
   }));
 }
-const SDGContainer = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n\tgap: 8px;\n\n\t.sdg-item {\n\t\theight: 90px;\n\t\twidth: 90px;\n\t\tborder-radius: 8px;\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t.sdg-item-content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\theight: 100%;\n\t\tcolor: white;\n\t\ttext-align: center;\n\t}\n"])));
+const SDGContainer = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n\tgap: 8px;\n\n\t.sdg-item {\n\t\theight: 100px;\n\t\twidth: 100px;\n\t\tborder-radius: 8px;\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t.sdg-item-content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\theight: 100%;\n\t\tcolor: white;\n\t\ttext-align: center;\n\t}\n"])));
+
+const ImageContainer = dt.div`
+	overflow: hidden;
+	position: relative;
+
+	.image {
+		width: 100%;
+		height: 151px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	.icon-container {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		background: white;
+		padding: 10px;
+		border-radius: 6px;
+		cursor: pointer;
+	}
+`;
+const ProjectWidgetItems = dt.ul`
+	list-style: none;
+	padding: 0;
+	padding-top: 10px;
+	margin: 0;
+
+	.project-widget-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid var(--base-gray-30);
+		padding: 10px 0;
+
+		&:last-of-type {
+			border-bottom: 0;
+		}
+	}
+`;
+const SDGList = dt.ul`
+	list-style: none;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin: 0;
+
+	.sdg-item-image {
+		width: 24px;
+		height: 24px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+`;
+const Label = dt.span`
+	font-family: SF UI Display;
+	font-weight: 500;
+	font-style: Medium;
+	font-size: 14px;
+	leading-trim: NONE;
+	line-height: 26px;
+	letter-spacing: 0%;
+	color: #6c737f;
+`;
+
+const {
+  Meta
+} = antd.Card;
+const {
+  useToken: useToken$h
+} = antd.theme;
+function ProjectWidget(_ref) {
+  let {
+    title,
+    description,
+    onLinkClick,
+    image,
+    linkIcon = "Link",
+    sdgList,
+    items,
+    hideSDGList = false,
+    t = x => x
+  } = _ref;
+  const [isHovered, setIsHovered] = React__default["default"].useState(false);
+  const {
+    token
+  } = useToken$h();
+  return /*#__PURE__*/jsxRuntime.jsxs(antd.Card, {
+    style: {
+      flex: 1
+    },
+    hoverable: true,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    cover: /*#__PURE__*/jsxRuntime.jsxs(ImageContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "image",
+        style: {
+          backgroundImage: "url(".concat(image, ")")
+        }
+      }), onLinkClick && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "icon-container",
+        onClick: onLinkClick,
+        children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+          name: linkIcon,
+          width: 16,
+          height: 16,
+          color: isHovered ? token.colorPrimary7 : "black"
+        })
+      })]
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Meta, {
+      title: title || undefined,
+      description: description || undefined
+    }), /*#__PURE__*/jsxRuntime.jsx(ProjectWidgetItems, {
+      children: items.map((item, index) => /*#__PURE__*/jsxRuntime.jsxs("li", {
+        className: "project-widget-item",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+          children: item.label
+        }), item.render()]
+      }, index))
+    }), !hideSDGList && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        borderTop: "1px solid var(--base-gray-30)",
+        paddingTop: "10px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        children: "SDGs:"
+      }), /*#__PURE__*/jsxRuntime.jsx(SDGList, {
+        children: sdgList.map((sdg, index) => {
+          return /*#__PURE__*/jsxRuntime.jsx("li", {
+            className: "project-widget-item",
+            children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+              title: t("SDGS::".concat(sdg)),
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                style: {
+                  backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")")
+                },
+                className: "sdg-item-image"
+              })
+            })
+          }, index);
+        })
+      })]
+    })]
+  });
+}
 
 var Style$w = dt.div`
   border: 1px solid var(--base-gray-40);
@@ -59700,6 +59976,7 @@ exports.ProjectVisualisationAlert = Alert;
 exports.ProjectVisualisationFooter = Footer;
 exports.ProjectVisualisationHeader = Header;
 exports.ProjectVisualisationSelect = CustomSelect;
+exports.ProjectWidget = ProjectWidget;
 exports.RadarChart = RadarChart;
 exports.RadialBarChart = RadialBarChart;
 exports.SDGWidget = SDGWidget;