datastake-daf 0.6.802 → 0.6.804

package/dist/components/index.js

@@ -4778,7 +4778,7 @@ const config$2 = {
   Down: config$3
 };
 
-const _excluded$F = ["width", "height", "size", "name", "fill"];
+const _excluded$H = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -4787,7 +4787,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   const conf = config$2[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -5076,7 +5076,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$E = ["view", "module", "scope", "form", "meta", "createdAt", "updatedAt"];
+const _excluded$G = ["view", "module", "scope", "form", "meta", "createdAt", "updatedAt"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -5452,7 +5452,7 @@ const filterCreateData = data => {
       createdAt,
       updatedAt
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$E);
+    rest = _objectWithoutProperties(data, _excluded$G);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -5848,7 +5848,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$D = ["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$F = ["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 = [],
@@ -5879,7 +5879,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -6623,8 +6623,8 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-var _templateObject$h;
-const Style$T = styled__default["default"].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t}\n"])));
+var _templateObject$i;
+const Style$T = styled__default["default"].div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t}\n"])));
 
 /**
  * ComponentWithFocus
@@ -6696,8 +6696,8 @@ function ComponentWithFocus(_ref) {
   });
 }
 
-var _templateObject$g;
-const _excluded$C = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
+var _templateObject$h;
+const _excluded$E = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
 function StickyTable(_ref) {
   let {
       size = "small",
@@ -6708,7 +6708,7 @@ function StickyTable(_ref) {
       pagination = false,
       doEmptyRows = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   const data = React__default["default"].useMemo(() => {
     if (!doEmptyRows) {
       return dataSource;
@@ -6754,7 +6754,7 @@ function StickyTable(_ref) {
     })
   });
 }
-const Style$S = styled__default["default"].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n\tmax-width: calc(100% - 48px);\n\tmargin-left: var(--size-lg);\n\toverflow: hidden;\n\n\t.daf-table {\n\t\tpadding: 0px;\n\t\tmargin-top: 0px;\n\n\t\t.ant-tag {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.daf-select-filters .filters {\n\t\tpadding-top: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n\t.daf-table {\n\t\tpadding-top: 16px;\n\t}\n"])));
+const Style$S = styled__default["default"].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n\tmax-width: calc(100% - 48px);\n\tmargin-left: var(--size-lg);\n\toverflow: hidden;\n\n\t.daf-table {\n\t\tpadding: 0px;\n\t\tmargin-top: 0px;\n\n\t\t.ant-tag {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.daf-select-filters .filters {\n\t\tpadding-top: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n\t.daf-table {\n\t\tpadding-top: 16px;\n\t}\n"])));
 StickyTable.propTypes = {
   size: PropTypes__default["default"].any,
   maxHeight: PropTypes__default["default"].number,
@@ -7236,7 +7236,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$B = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$D = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -7250,7 +7250,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$B);
+    restProps = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -7369,12 +7369,12 @@ const Style$R = styled__default["default"].div`
   }
 `;
 
-const _excluded$A = ["children"];
+const _excluded$C = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/jsxRuntime.jsx(Style$R, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -7383,7 +7383,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$f;
+var _templateObject$g;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -7501,7 +7501,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$Q = styled__default["default"].div(_templateObject$f || (_templateObject$f = _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$Q = styled__default["default"].div(_templateObject$g || (_templateObject$g = _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,
@@ -7514,12 +7514,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$z = ["icon"];
+const _excluded$B = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -7849,7 +7849,7 @@ const MultiSelectStyled = styled__default["default"](antd.Select)`
   }
 `;
 
-const _excluded$y = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$A = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$n
 } = antd.theme;
@@ -7942,7 +7942,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$y);
+    restProps = _objectWithoutProperties(_ref, _excluded$A);
   const {
     token
   } = useToken$n();
@@ -8662,7 +8662,7 @@ DAFHeader.propTypes = {
   filtersConfig: PropTypes__default["default"].any
 };
 
-const _excluded$x = ["tabs", "onChange", "value", "className"];
+const _excluded$z = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -8670,7 +8670,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -8767,7 +8767,7 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$w = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const _excluded$y = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
 const useFooter = _ref => {
   let {
     leftContent,
@@ -8802,7 +8802,7 @@ const useFooter = _ref => {
                 style = {},
                 className = ""
               } = button,
-              restProps = _objectWithoutProperties(button, _excluded$w);
+              restProps = _objectWithoutProperties(button, _excluded$y);
             return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
@@ -8829,8 +8829,8 @@ const useFooter = _ref => {
   };
 };
 
-var _templateObject$e;
-const FooterContainer = styled__default["default"].div(_templateObject$e || (_templateObject$e = _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"])));
+var _templateObject$f;
+const FooterContainer = styled__default["default"].div(_templateObject$f || (_templateObject$f = _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"])));
 
 function DAFFooter(_ref) {
   let {
@@ -11683,7 +11683,7 @@ Widget.propTypes = {
 };
 Widget.displayName = 'Widget';
 
-const _excluded$v = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText", "isPdf"];
+const _excluded$x = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText", "isPdf"];
 function ImageWidget(_ref) {
   let {
       loading = false,
@@ -11694,7 +11694,7 @@ function ImageWidget(_ref) {
       noDescriptionText,
       isPdf = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   const expandable = isPdf ? false : props.expandable;
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     loading: loading,
@@ -11753,8 +11753,8 @@ function ImageWidget(_ref) {
 }
 ImageWidget.displayName = 'ImageWidget';
 
-var _templateObject$d;
-const _excluded$u = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
+var _templateObject$e;
+const _excluded$w = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
 function FlowWidget(_ref) {
   let {
       title,
@@ -11766,7 +11766,7 @@ function FlowWidget(_ref) {
       className,
       direction = "horizontal"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   const [activeTab, setActiveTab] = React.useState();
   React.useEffect(() => {
     if (defaultActiveTab) {
@@ -11903,7 +11903,7 @@ function Icon(_ref2) {
     return icon(status);
   }
 }
-const Style$P = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\tscrollbar-width: none;\n\n\t-ms-overflow-style: none;\n\n\t@media (max-width: 532px) {\n\t\toverflow-x: hidden;\n\t}\n\n\t:where(.ant-steps-horizontal):not(.ant-steps-label-vertical) {\n\t\t.ant-steps-item-content {\n\t\t\twidth: 100%;\n\n\t\t\t.ant-steps-item-description {\n\t\t\t\tmin-width: 205px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n"])));
+const Style$P = styled__default["default"].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\tscrollbar-width: none;\n\n\t-ms-overflow-style: none;\n\n\t@media (max-width: 532px) {\n\t\toverflow-x: hidden;\n\t}\n\n\t:where(.ant-steps-horizontal):not(.ant-steps-label-vertical) {\n\t\t.ant-steps-item-content {\n\t\t\twidth: 100%;\n\n\t\t\t.ant-steps-item-description {\n\t\t\t\tmin-width: 205px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n"])));
 FlowWidget.propTypes = {
   title: PropTypes__default["default"].string,
   loading: PropTypes__default["default"].bool,
@@ -12441,7 +12441,7 @@ const NoMinWidth = styled__default["default"].div`
 	}
 `;
 
-var _templateObject$c;
+var _templateObject$d;
 function ActivityIndicatorsWidget(_ref) {
   let {
     t = s => s,
@@ -12590,7 +12590,7 @@ function renderStatus$1(configItem) {
       });
   }
 }
-const StatusBadge = styled__default["default"].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\n\t&.compliant {\n\t\tbackground-color: #ECFDF3;\n\t\tborder: 1px solid #A7F3D0;\n\t}\n\n\t&.not-compliant {\n\t\tbackground-color: #FEF3F2;\n\t\tborder: 1px solid #FECACA;\n\t}\n\n\t&.empty {\n\t\tbackground-color: #F9FAFB;\n\t\tborder: 1px solid #E5E7EB;\n\t}\n"])));
+const StatusBadge = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\n\t&.compliant {\n\t\tbackground-color: #ECFDF3;\n\t\tborder: 1px solid #A7F3D0;\n\t}\n\n\t&.not-compliant {\n\t\tbackground-color: #FEF3F2;\n\t\tborder: 1px solid #FECACA;\n\t}\n\n\t&.empty {\n\t\tbackground-color: #F9FAFB;\n\t\tborder: 1px solid #E5E7EB;\n\t}\n"])));
 ActivityIndicatorsWidget.displayName = "ActivityIndicatorsWidget";
 
 function TooltipIcon(_ref) {
@@ -15482,7 +15482,7 @@ Map$3.propTypes = {
   link: PropTypes__default["default"].any
 };
 
-const _excluded$t = ["isExpanded", "shouldRenderMap", "renderKey", "title", "loading", "t", "user", "data", "height", "widgetConfig"];
+const _excluded$v = ["isExpanded", "shouldRenderMap", "renderKey", "title", "loading", "t", "user", "data", "height", "widgetConfig"];
 function InExpandableWidgetMap(_ref) {
   let {
       isExpanded,
@@ -15496,7 +15496,7 @@ function InExpandableWidgetMap(_ref) {
       height,
       widgetConfig
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   const [mapKey, setMapKey] = React.useState(0);
   const [isMapReady, setIsMapReady] = React.useState(false);
   React.useEffect(() => {
@@ -17696,14 +17696,14 @@ const MapConfig = ({
   });
 };
 
-const _excluded$s = ["config", "title", "loading"];
+const _excluded$u = ["config", "title", "loading"];
 const Details = _ref => {
   let {
       config = [],
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header card",
     loading: loading,
@@ -17719,14 +17719,14 @@ const Details = _ref => {
   }));
 };
 
-const _excluded$r = ["config", "title", "loading"];
+const _excluded$t = ["config", "title", "loading"];
 const KeyIndicatorsDetails = _ref => {
   let {
       config,
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header",
     title: title,
@@ -17756,7 +17756,7 @@ const Style$G = styled__default["default"].div`
     }    
 `;
 
-const _excluded$q = ["children", "config", "detailsTitle", "firstColumnWidth"];
+const _excluded$s = ["children", "config", "detailsTitle", "firstColumnWidth"];
 const DetailsSection = _ref => {
   let {
       children,
@@ -17764,7 +17764,7 @@ const DetailsSection = _ref => {
       detailsTitle,
       firstColumnWidth = "250px"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/jsxRuntime.jsx(Style$G, {
     firstColumnWidth: firstColumnWidth,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -17939,15 +17939,15 @@ const getGoalConfig = () => {
   }];
 };
 
-var _templateObject$b;
-const _excluded$p = ["title", "activeSdgGoals", "t"];
+var _templateObject$c;
+const _excluded$r = ["title", "activeSdgGoals", "t"];
 function SDGWidget(_ref) {
   let {
       title = "Sustainable Development Goals",
       activeSdgGoals = [],
       t = key => key
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   const sdgConfig = getGoalConfig();
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     title: title,
@@ -17968,10 +17968,10 @@ function SDGWidget(_ref) {
     })
   }));
 }
-const SDGContainer = styled__default["default"].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(53px, 1fr));\n\tgap: 8px;\n\n\t.sdg-item {\n\t\theight: 53px;\n\t\twidth: 53px;\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 = styled__default["default"].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(53px, 1fr));\n\tgap: 8px;\n\n\t.sdg-item {\n\t\theight: 53px;\n\t\twidth: 53px;\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"])));
 
-var _templateObject$a;
-const Style$F = styled__default["default"].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t\tcursor: default;\n\t}\n"])));
+var _templateObject$b;
+const Style$F = styled__default["default"].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t\tcursor: default;\n\t}\n"])));
 
 /**
  * ComponentWithHoverFocus
@@ -18245,7 +18245,7 @@ function SdgList({
   });
 }
 
-const _excluded$o = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
+const _excluded$q = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
 const {
   Meta
 } = antd.Card;
@@ -18265,7 +18265,7 @@ function ProjectWidget(_ref) {
       hideSDGList = false,
       t = x => x
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   const [isHovered, setIsHovered] = React__default["default"].useState(false);
   const {
     token
@@ -18537,13 +18537,13 @@ const WidgetCard = _ref => {
   });
 };
 
-const _excluded$n = ["title", "children"];
+const _excluded$p = ["title", "children"];
 const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       title,
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$n);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   /**
    * Handles carousel slide change events
    * @param {number} currentSlide - The index of the current slide after change
@@ -18707,7 +18707,7 @@ const EmptyStateContainer = styled__default["default"].div`
   }
 `;
 
-const _excluded$m = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows", "emptyLogo", "emptyText"];
+const _excluded$o = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows", "emptyLogo", "emptyText"];
 function ImageCarousel(_ref) {
   let {
       title,
@@ -18722,7 +18722,7 @@ function ImageCarousel(_ref) {
       emptyLogo = antd.Empty.PRESENTED_IMAGE_SIMPLE,
       emptyText = "No Image"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   const [previewVisible, setPreviewVisible] = React.useState(false);
   const [current, setCurrent] = React.useState(0);
   const carouselRef = React.useRef(null);
@@ -19090,8 +19090,8 @@ const getVegetationConfig = () => {
   }];
 };
 
-var _templateObject$9, _templateObject2$1;
-const _excluded$l = ["title", "activeVegetationConditions", "filterKeys", "columnsPerRow", "itemWidth", "itemHeight", "growthObservations", "t"];
+var _templateObject$a, _templateObject2$3;
+const _excluded$n = ["title", "activeVegetationConditions", "filterKeys", "columnsPerRow", "itemWidth", "itemHeight", "growthObservations", "t"];
 function VegetationWidget(_ref) {
   let {
       title = "Vegetation Health",
@@ -19103,7 +19103,7 @@ function VegetationWidget(_ref) {
       growthObservations = [],
       t = key => key
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   let vegetationConfig = getVegetationConfig();
 
   // Get all VEGETATION_KEYS values before filtering (needed for mapping check)
@@ -19178,8 +19178,182 @@ function VegetationWidget(_ref) {
     })
   }));
 }
-const VegetationWrapper = styled__default["default"].div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n\t", "\n"])), props => props.$columnsPerRow ? "\n\t\toverflow-x: auto;\n\t\twidth: 100%;\n\t" : '');
-const VegetationContainer = styled__default["default"].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: ", ";\n\tgap: 24px;\n\t", "\n\n\t.vegetation-item {\n\t\twidth: 100%;\n\t\taspect-ratio: ", ";\n\t\tborder-radius: 7px;\n\t\tflex-shrink: 0;\n\t\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t.vegetation-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"])), props => props.$columnsPerRow ? "repeat(".concat(props.$columnsPerRow, ", 1fr)") : "repeat(auto-fit, minmax(".concat(props.$itemWidth, "px, 1fr))"), props => props.$columnsPerRow ? "\n\t\twidth: 100%;\n\t" : '', props => props.$itemWidth / props.$itemHeight);
+const VegetationWrapper = styled__default["default"].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n\t", "\n"])), props => props.$columnsPerRow ? "\n\t\toverflow-x: auto;\n\t\twidth: 100%;\n\t" : '');
+const VegetationContainer = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: ", ";\n\tgap: 24px;\n\t", "\n\n\t.vegetation-item {\n\t\twidth: 100%;\n\t\taspect-ratio: ", ";\n\t\tborder-radius: 7px;\n\t\tflex-shrink: 0;\n\t\n\t\tbackground-size: cover;\n\t\tbackground-position: center;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\t.vegetation-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"])), props => props.$columnsPerRow ? "repeat(".concat(props.$columnsPerRow, ", 1fr)") : "repeat(auto-fit, minmax(".concat(props.$itemWidth, "px, 1fr))"), props => props.$columnsPerRow ? "\n\t\twidth: 100%;\n\t" : '', props => props.$itemWidth / props.$itemHeight);
+
+const getFaunaConfig = () => {
+  return [{
+    img: "/Biodiversity/birds.svg",
+    key: "birds",
+    disabled: "/Biodiversity/birds-default.svg"
+  }, {
+    img: "/Biodiversity/crabs.svg",
+    key: "crabs",
+    disabled: "/Biodiversity/crabs-default.svg"
+  }, {
+    img: "/Biodiversity/cymbium.svg",
+    key: "cymbium",
+    disabled: "/Biodiversity/cymbium-default.svg"
+  }, {
+    img: "/Biodiversity/fish.svg",
+    key: "fish",
+    disabled: "/Biodiversity/fish-default.svg"
+  }, {
+    img: "/Biodiversity/juveniles.svg",
+    key: "juveniles",
+    disabled: "/Biodiversity/juveniles-default.svg"
+  }, {
+    img: "/Biodiversity/mollusks.svg",
+    key: "mollusks",
+    disabled: "/Biodiversity/mollusks-default.svg"
+  }, {
+    img: "/Biodiversity/mongooses.svg",
+    key: "mongooses",
+    disabled: "/Biodiversity/mongooses-default.svg"
+  }, {
+    img: "/Biodiversity/monkeys.svg",
+    key: "monkeys",
+    disabled: "/Biodiversity/monkeys-default.svg"
+  }, {
+    img: "/Biodiversity/oysters.svg",
+    key: "oysters",
+    disabled: "/Biodiversity/oysters-default.svg"
+  }, {
+    img: "/Biodiversity/snails.svg",
+    key: "snails",
+    disabled: "/Biodiversity/snails-default.svg"
+  }];
+};
+
+var _templateObject$9, _templateObject2$2;
+const _excluded$m = ["title", "faunaPresent", "filterKeys", "columnsPerRow", "itemWidth", "itemHeight", "t"];
+function FaunaWidget(_ref) {
+  let {
+      title = "Observed Fauna",
+      faunaPresent = [],
+      filterKeys = null,
+      columnsPerRow = 5,
+      itemWidth = 100,
+      itemHeight = 100,
+      t = key => key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$m);
+  let faunaConfig = getFaunaConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    faunaConfig = faunaConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
+    title: title,
+    className: "with-border-header no-p-body"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(FaunaWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(FaunaContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: faunaConfig.map(item => {
+          // Use colored SVG if the item's key exists in faunaPresent array
+          // Otherwise use default SVG
+          const isPresent = Array.isArray(faunaPresent) && faunaPresent.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t("straatos::".concat(item.key)),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: "fauna-item",
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  }));
+}
+const FaunaWrapper = styled__default["default"].div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n\tpadding: 24px;\n\twidth: 100%;\n\t", "\n"])), props => props.$columnsPerRow ? "\n\t\toverflow-x: auto;\n\t" : '');
+const FaunaContainer = styled__default["default"].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: ", ";\n\tgap: 24px;\n\twidth: 100%;\n\n\t.fauna-item {\n\t\twidth: 100%;\n\t\taspect-ratio: ", ";\n\t\tborder-radius: 7px;\n\t\tflex-shrink: 0;\n\t\tdisplay: block;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tobject-fit: contain;\n\t}\n"])), props => props.$columnsPerRow ? "repeat(".concat(props.$columnsPerRow, ", 1fr)") : "repeat(auto-fit, minmax(".concat(props.$itemWidth, "px, 1fr))"), props => props.$itemWidth / props.$itemHeight);
+
+const getInvasiveSpeciesConfig = () => {
+  return [{
+    img: "/Biodiversity/spiders.svg",
+    key: "spiders",
+    disabled: "/Biodiversity/spiders-default.svg"
+  }, {
+    img: "/Biodiversity/scale-insects.svg",
+    key: "scaleInsects",
+    disabled: "/Biodiversity/scale-insects-default.svg"
+  }, {
+    img: "/Biodiversity/caterpillars.svg",
+    key: "caterpillars",
+    disabled: "/Biodiversity/caterpillars-default.svg"
+  }, {
+    img: "/Biodiversity/ants.svg",
+    key: "ants",
+    disabled: "/Biodiversity/ants-default.svg"
+  }, {
+    img: "/Biodiversity/unidentified-pests.svg",
+    key: "unidentifiedPests",
+    disabled: "/Biodiversity/unidentified-pests-default.svg"
+  }, {
+    img: "/Biodiversity/others.svg",
+    key: "other",
+    disabled: "/Biodiversity/others-default.svg"
+  }];
+};
+
+var _templateObject$8, _templateObject2$1;
+const _excluded$l = ["title", "invasiveSpecies", "hasInvasiveSpecies", "filterKeys", "columnsPerRow", "itemWidth", "itemHeight", "t"];
+function InvasiveSpeciesWidget(_ref) {
+  let {
+      title = "Invasive Species",
+      invasiveSpecies = [],
+      hasInvasiveSpecies,
+      filterKeys = null,
+      columnsPerRow = 3,
+      itemWidth = 100,
+      itemHeight = 100,
+      t = key => key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  let invasiveSpeciesConfig = getInvasiveSpeciesConfig();
+
+  // Filter to show only specific keys if filterKeys is provided
+  if (filterKeys && Array.isArray(filterKeys)) {
+    invasiveSpeciesConfig = invasiveSpeciesConfig.filter(item => filterKeys.includes(item.key));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
+    title: title,
+    className: "with-border-header no-p-body"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesWrapper, {
+      $columnsPerRow: columnsPerRow,
+      children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpeciesContainer, {
+        $columnsPerRow: columnsPerRow,
+        $itemWidth: itemWidth,
+        $itemHeight: itemHeight,
+        children: invasiveSpeciesConfig.map(item => {
+          // If hasInvasiveSpecies is 'no', show all as inactive
+          // If hasInvasiveSpecies is 'yes', show present ones as active
+          const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
+          const isPresent = !shouldShowAllAsNotPresent && Array.isArray(invasiveSpecies) && invasiveSpecies.includes(item.key);
+          const shouldUseColored = isPresent;
+          return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: t("straatos::".concat(item.key)),
+            children: /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: shouldUseColored ? item.img : item.disabled,
+              className: "invasive-species-item",
+              alt: item.key
+            }, item.key)
+          }, item.key);
+        })
+      })
+    })
+  }));
+}
+const InvasiveSpeciesWrapper = styled__default["default"].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n\tpadding: 24px;\n\twidth: 100%;\n\t", "\n"])), props => props.$columnsPerRow ? "\n\t\toverflow-x: auto;\n\t" : '');
+const InvasiveSpeciesContainer = styled__default["default"].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: ", ";\n\tgap: 24px;\n\twidth: 100%;\n\n\t.invasive-species-item {\n\t\twidth: 100%;\n\t\taspect-ratio: ", ";\n\t\tborder-radius: 7px;\n\t\tflex-shrink: 0;\n\t\tdisplay: block;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tobject-fit: contain;\n\t}\n"])), props => props.$columnsPerRow ? "repeat(".concat(props.$columnsPerRow, ", 1fr)") : "repeat(auto-fit, minmax(".concat(props.$itemWidth, "px, 1fr))"), props => props.$itemWidth / props.$itemHeight);
 
 var Style$C = styled__default["default"].div`
   border: 1px solid var(--base-gray-40);
@@ -25768,7 +25942,7 @@ const countriesPhoneNumberLength = {
   ZW: 9
 };
 
-var _templateObject$8;
+var _templateObject$7;
 const dialCodes = Object.keys(countriesList.countries).map(country => {
   return {
     name: country === 'XK' ? "+383" : "+".concat(countriesList.countries[country].phone.split(',')[0]),
@@ -25779,7 +25953,7 @@ const dialCodes = Object.keys(countriesList.countries).map(country => {
     length: countriesPhoneNumberLength[country] || 9
   };
 }).sort((a, b) => a.countryName > b.countryName ? 1 : b.countryName > a.countryName ? -1 : 0);
-const Styles$9 = styled__default["default"].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n\n  .input-c {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    flex-grow: 1;\n    align-items: center;\n    position: relative\n\n    &.highlighted-input {\n      border: 0.5px solid #FF7A45;\n      border-radius: 8px;\n    }\n\n    .ant-select {\n      width: ", ";\n      .ant-select-selector {\n        border-top-right-radius: 0;\n        background-color: var(--base-gray-20);\n        border-bottom-right-radius: 0;\n      }\n    }\n    .ant-input-number {\n      border-left: none;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      .ant-input-number-handler-wrap {\n        display: none;\n      }\n      width: 100%;\n    }\n\n    &.has-error {\n      .error-icon {\n        position: absolute;\n        right: 10px;\n        color: red;\n        top: 50%;\n        transform: translate(0%, -50%);\n      }\n    }\n  }\n\n  .ant-form-item-explain-error {\n    margin-bottom: 0px;\n  }\n"])), props => props.customSelectWidthPercentage || '100%');
+const Styles$9 = styled__default["default"].div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n\n  .input-c {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    flex-grow: 1;\n    align-items: center;\n    position: relative\n\n    &.highlighted-input {\n      border: 0.5px solid #FF7A45;\n      border-radius: 8px;\n    }\n\n    .ant-select {\n      width: ", ";\n      .ant-select-selector {\n        border-top-right-radius: 0;\n        background-color: var(--base-gray-20);\n        border-bottom-right-radius: 0;\n      }\n    }\n    .ant-input-number {\n      border-left: none;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      .ant-input-number-handler-wrap {\n        display: none;\n      }\n      width: 100%;\n    }\n\n    &.has-error {\n      .error-icon {\n        position: absolute;\n        right: 10px;\n        color: red;\n        top: 50%;\n        transform: translate(0%, -50%);\n      }\n    }\n  }\n\n  .ant-form-item-explain-error {\n    margin-bottom: 0px;\n  }\n"])), props => props.customSelectWidthPercentage || '100%');
 function PhoneInput(_ref) {
   let {
     className,
@@ -42189,8 +42363,13 @@ const Navigation = _ref => {
   }) : null;
 };
 
-var _templateObject$7;
-const StyledSelect = styled__default["default"](antd.Select)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  .ant-select-arrow {\n    margin-top: 1px !important;\n  }\n"])));
+const StyledSelect = styled__default["default"](antd.Select)`
+  width: 100%;
+  
+  .ant-select-arrow {
+    margin-top: 1px !important;
+  }
+`;
 
 const _excluded$f = ["onChange", "value"];
 function AuthForm(_ref) {
@@ -54016,7 +54195,7 @@ const getColumns$4 = ({
           className: "daf-default-cell"
         });
       }
-      const category = findOptions(value, selectOptions?.category || []) || "--";
+      const category = findOptions(value, options?.locationCategories || []) || "--";
       return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
         title: category,
         children: category
@@ -63677,6 +63856,7 @@ exports.DualAxesChart = DualAxesChart;
 exports.DynamicForm = DynamicForm;
 exports.EditForm = EditForm$1;
 exports.EditFormSections = Sections;
+exports.FaunaWidget = FaunaWidget;
 exports.FilterButton = FilterButton;
 exports.FindInformation = FindInformation;
 exports.FindInformationProvider = FindInformationProvider;
@@ -63698,6 +63878,7 @@ exports.InformationChannelsDataPoint = DataPoint;
 exports.InformationChannelsSubject = Subject;
 exports.InformationChannelsView = InformationChannel;
 exports.InformationUnavailable = InformationUnavailable;
+exports.InvasiveSpeciesWidget = InvasiveSpeciesWidget;
 exports.KeyIndicatorNavigateLabel = KeyIndicatorNavigateLabel;
 exports.KeyIndicators = KeyIndicatorsWidget$1;
 exports.KeyIndicatorsDetails = KeyIndicatorsDetails;