datastake-daf 0.6.111 → 0.6.112

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": ["cukura"],
+	"files.autoSave": "afterDelay",
+	"editor.wordWrap": "on",
+	"editor.autoClosingBrackets": "always",
+	"editor.autoClosingComments": "always",
+	"editor.autoClosingQuotes": "always",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"notebook.defaultFormatter": "esbenp.prettier-vscode",
+	"javascript.format.semicolons": "insert"
+}

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$o = ["width", "height", "size", "name", "fill"];
+const _excluded$p = ["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$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   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$n = ["view", "module", "scope", "form", "meta"];
+const _excluded$o = ["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$n);
+    rest = _objectWithoutProperties(data, _excluded$o);
   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$m = ["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$n = ["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$m);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   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$l = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$m = ["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$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11489,12 +11489,12 @@ const Style$H = dt.div`
   }
 `;
 
-const _excluded$k = ["children"];
+const _excluded$l = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11503,7 +11503,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$b;
+var _templateObject$c;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11621,7 +11621,7 @@ function Badge(_ref) {
     })
   });
 }
-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"])));
+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"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11634,12 +11634,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$j = ["icon"];
+const _excluded$k = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11961,7 +11961,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$i = ["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
 } = antd.theme;
@@ -12054,7 +12054,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$i);
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
   const {
     token
   } = useToken$i();
@@ -12721,7 +12721,7 @@ DAFHeader.propTypes = {
   downloadDisabled: PropTypes__default["default"].any
 };
 
-const _excluded$h = ["tabs", "onChange", "value", "className"];
+const _excluded$i = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12729,7 +12729,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    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({
@@ -12826,7 +12826,7 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$g = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const _excluded$h = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
 const useFooter = _ref => {
   let {
     leftContent,
@@ -12861,7 +12861,7 @@ const useFooter = _ref => {
                 style = {},
                 className = ""
               } = button,
-              restProps = _objectWithoutProperties(button, _excluded$g);
+              restProps = _objectWithoutProperties(button, _excluded$h);
             return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
@@ -12888,8 +12888,8 @@ const useFooter = _ref => {
   };
 };
 
-var _templateObject$a;
-const FooterContainer = dt.div(_templateObject$a || (_templateObject$a = _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$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"])));
 
 function DAFFooter(_ref) {
   let {
@@ -15330,7 +15330,7 @@ Widget.propTypes = {
   onExpandChange: PropTypes__default["default"].func
 };
 
-const _excluded$f = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText"];
+const _excluded$g = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText"];
 function ImageWidget(_ref) {
   let {
       loading = false,
@@ -15340,7 +15340,7 @@ function ImageWidget(_ref) {
       imgAlt,
       noDescriptionText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     loading: loading,
     title: title,
@@ -15396,8 +15396,8 @@ function ImageWidget(_ref) {
   }));
 }
 
-var _templateObject$9;
-const _excluded$e = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
+var _templateObject$a;
+const _excluded$f = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
 function FlowWidget(_ref) {
   let {
       title,
@@ -15409,7 +15409,7 @@ function FlowWidget(_ref) {
       className,
       direction = "horizontal"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   const [activeTab, setActiveTab] = React.useState();
   React.useEffect(() => {
     if (defaultActiveTab) {
@@ -15546,7 +15546,7 @@ function Icon(_ref2) {
     return icon(status);
   }
 }
-const Style$F = dt.div(_templateObject$9 || (_templateObject$9 = _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$F = dt.div(_templateObject$a || (_templateObject$a = _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,
@@ -18094,8 +18094,8 @@ const useMap$1 = ({
   };
 };
 
-var _templateObject$8;
-const Style$B = dt.div(_templateObject$8 || (_templateObject$8 = _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$9;
+const Style$B = dt.div(_templateObject$9 || (_templateObject$9 = _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
@@ -19985,14 +19985,14 @@ const MapConfig = ({
   });
 };
 
-const _excluded$d = ["config", "title", "loading"];
+const _excluded$e = ["config", "title", "loading"];
 const Details = _ref => {
   let {
       config = [],
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header card",
     loading: loading,
@@ -20008,14 +20008,14 @@ const Details = _ref => {
   }));
 };
 
-const _excluded$c = ["config", "title", "loading"];
+const _excluded$d = ["config", "title", "loading"];
 const KeyIndicatorsDetails = _ref => {
   let {
       config,
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header",
     title: title,
@@ -20045,7 +20045,7 @@ const Style$x = dt.div`
     }    
 `;
 
-const _excluded$b = ["children", "config", "detailsTitle", "firstColumnWidth"];
+const _excluded$c = ["children", "config", "detailsTitle", "firstColumnWidth"];
 const DetailsSection = _ref => {
   let {
       children,
@@ -20053,7 +20053,7 @@ const DetailsSection = _ref => {
       detailsTitle,
       firstColumnWidth = "250px"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$b);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
     firstColumnWidth: firstColumnWidth,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -20262,6 +20262,128 @@ function WidgetCatalogue(_ref2) {
   });
 }
 
+// SVG paths moved to public folder
+
+const KEYS = {
+  NO_POVERTY: "noPoverty",
+  ZERO_HUNGER: "zeroHunger",
+  GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
+  QUALITY_EDUCATION: "qualityEducation",
+  GENDER_EQUALITY: "genderEquality",
+  CLEAN_WATER_SANITATION: "cleanWaterSanitation",
+  AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
+  DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
+  INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
+  REDUCED_INEQUALITIES: "reducedInequalities",
+  SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
+  RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
+  CLIMATE_ACTION: "climateAction",
+  LIFE_BELOW_WATER: "lifeBelowWater",
+  LIFE_ON_LAND: "lifeOnLand",
+  PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
+  PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals"
+};
+const getGoalConfig = () => {
+  return [{
+    img: "/SDGs/SDGs.svg",
+    key: KEYS.NO_POVERTY,
+    disabled: "/SDGs/SDGs-17.svg"
+  }, {
+    img: "/SDGs/SDGs-1.svg",
+    key: KEYS.ZERO_HUNGER,
+    disabled: "/SDGs/SDGs-18.svg"
+  }, {
+    img: "/SDGs/SDGs-2.svg",
+    key: KEYS.GOOD_HEALTH_WELL_BEING,
+    disabled: "/SDGs/SDGs-19.svg"
+  }, {
+    img: "/SDGs/SDGs-3.svg",
+    key: KEYS.QUALITY_EDUCATION,
+    disabled: "/SDGs/SDGs-20.svg"
+  }, {
+    img: "/SDGs/SDGs-4.svg",
+    key: KEYS.GENDER_EQUALITY,
+    disabled: "/SDGs/SDGs-21.svg"
+  }, {
+    img: "/SDGs/SDGs-5.svg",
+    key: KEYS.CLEAN_WATER_SANITATION,
+    disabled: "/SDGs/SDGs-22.svg"
+  }, {
+    img: "/SDGs/SDGs-6.svg",
+    key: KEYS.AFFORDABLE_CLEAN_ENERGY,
+    disabled: "/SDGs/SDGs-23.svg"
+  }, {
+    img: "/SDGs/SDGs-7.svg",
+    key: KEYS.DECENT_WORK_ECONOMIC_GROWTH,
+    disabled: "/SDGs/SDGs-24.svg"
+  }, {
+    img: "/SDGs/SDGs-8.svg",
+    key: KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE,
+    disabled: "/SDGs/SDGs-25.svg"
+  }, {
+    img: "/SDGs/SDGs-9.svg",
+    key: KEYS.REDUCED_INEQUALITIES,
+    disabled: "/SDGs/SDGs-26.svg"
+  }, {
+    img: "/SDGs/SDGs-10.svg",
+    key: KEYS.PARTNERSHIPS_FOR_GOALS,
+    disabled: "/SDGs/SDGs-27.svg"
+  }, {
+    img: "/SDGs/SDGs-11.svg",
+    key: KEYS.SUSTAINABLE_CITIES_COMMUNITIES,
+    disabled: "/SDGs/SDGs-28.svg"
+  }, {
+    img: "/SDGs/SDGs-12.svg",
+    key: KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION,
+    disabled: "/SDGs/SDGs-29.svg"
+  }, {
+    img: "/SDGs/SDGs-13.svg",
+    key: KEYS.CLIMATE_ACTION,
+    disabled: "/SDGs/SDGs-30.svg"
+  }, {
+    img: "/SDGs/SDGs-14.svg",
+    key: KEYS.LIFE_BELOW_WATER,
+    disabled: "/SDGs/SDGs-31.svg"
+  }, {
+    img: "/SDGs/SDGs-15.svg",
+    key: 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
+  }];
+};
+
+var _templateObject$8;
+const _excluded$b = ["title", "activeSdgGoals", "t"];
+function SDGWidget(_ref) {
+  let {
+      title = "Sustainable Development Goals",
+      activeSdgGoals = [],
+      t = key => key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  const sdgConfig = getGoalConfig();
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
+    title: title,
+    className: "with-border-header"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(SDGContainer, {
+      children: sdgConfig.map(item => {
+        const isDisabled = !activeSdgGoals.includes(item.key);
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "sdg-item",
+          style: {
+            backgroundImage: "url(".concat(isDisabled ? item.disabled : item.img, ")")
+          }
+        }, item.key);
+      })
+    })
+  }));
+}
+const SDGContainer = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(50px, 1fr));\n\tgap: 8px;\n\n\t.sdg-item {\n\t\theight: 50px;\n\t\twidth: 50px;\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 Style$w = dt.div`
   border: 1px solid var(--base-gray-40);
   padding: 12px;
@@ -59551,6 +59673,7 @@ exports.ProjectVisualisationHeader = Header;
 exports.ProjectVisualisationSelect = CustomSelect;
 exports.RadarChart = RadarChart;
 exports.RadialBarChart = RadialBarChart;
+exports.SDGWidget = SDGWidget;
 exports.SearchFilters = SearchFilters;
 exports.Segment = Segment;
 exports.SelectFilters = SelectFilters;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.111",
+	"version": "0.6.112",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/SDGWidget.stories.jsx

@@ -20,6 +20,24 @@ export const Primary = {
 	name: "SDGWidget",
 	args: {
 		title: "Sustainable Development Goals",
-		activeSdgGoals: ["noPoverty"],
+		activeSdgGoals: [
+			"noPoverty",
+			"zeroHunger",
+			"goodHealthWellbeing",
+
+			"genderEquality",
+			"cleanWaterSanitation",
+			"affordableCleanEnergy",
+			"decentWorkEconomicGrowth",
+			"industryInnovationInfrastructure",
+			"reducedInequalities",
+			"sustainableCitiesCommunities",
+
+			"climateAction",
+			"lifeBelowWater",
+			"lifeOnLand",
+			"peaceJusticeStrongInstitutions",
+			"partnershipsForGoals",
+		],
 	},
 };

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/config.js

@@ -1,38 +1,4 @@
-import NoPoverty from "./SDGs/SDGs.svg";
-import ZeroHunger from "./SDGs/SDGs-1.svg";
-import GoodHealth from "./SDGs/SDGs-2.svg";
-import QualityEducation from "./SDGs/SDGs-3.svg";
-import GenderEquality from "./SDGs/SDGs-4.svg";
-import CleanWater from "./SDGs/SDGs-5.svg";
-import AffordableEnergy from "./SDGs/SDGs-6.svg";
-import DecentWork from "./SDGs/SDGs-7.svg";
-import IndustryInnovation from "./SDGs/SDGs-8.svg";
-import ReducedInequality from "./SDGs/SDGs-9.svg";
-import SustainableDevelopment from "./SDGs/SDGs-10.svg";
-import SustainableCities from "./SDGs/SDGs-11.svg";
-import ResponsibleConsumption from "./SDGs/SDGs-12.svg";
-import ClimateAction from "./SDGs/SDGs-13.svg";
-import LifeBelowWater from "./SDGs/SDGs-14.svg";
-import LifeOnLand from "./SDGs/SDGs-15.svg";
-import PeaceJustice from "./SDGs/SDGs-16.svg";
-
-import NoPovertyDisabled from "./SDGs/SDGs-17.svg";
-import ZeroHungerDisabled from "./SDGs/SDGs-18.svg";
-import GoodHealthDisabled from "./SDGs/SDGs-19.svg";
-import QualityEducationDisabled from "./SDGs/SDGs-20.svg";
-import GenderEqualityDisabled from "./SDGs/SDGs-21.svg";
-import CleanWaterDisabled from "./SDGs/SDGs-22.svg";
-import AffordableEnergyDisabled from "./SDGs/SDGs-23.svg";
-import DecentWorkDisabled from "./SDGs/SDGs-24.svg";
-import IndustryInnovationDisabled from "./SDGs/SDGs-25.svg";
-import ReducedInequalityDisabled from "./SDGs/SDGs-26.svg";
-import SustainableDevelopmentDisabled from "./SDGs/SDGs-27.svg";
-import SustainableCitiesDisabled from "./SDGs/SDGs-28.svg";
-import ResponsibleConsumptionDisabled from "./SDGs/SDGs-29.svg";
-import ClimateActionDisabled from "./SDGs/SDGs-30.svg";
-import LifeBelowWaterDisabled from "./SDGs/SDGs-31.svg";
-import LifeOnLandDisabled from "./SDGs/SDGs-32.svg";
-import PeaceJusticeDisabled from "./SDGs/SDGs-33.svg";
+// SVG paths moved to public folder
 
 const KEYS = {
 	NO_POVERTY: "noPoverty",
@@ -56,77 +22,77 @@ const KEYS = {
 
 export const getGoalConfig = () => {
 	return [
-		{ img: NoPoverty, key: KEYS.NO_POVERTY, disabled: NoPovertyDisabled },
-		{ img: ZeroHunger, key: KEYS.ZERO_HUNGER, disabled: ZeroHungerDisabled },
+		{ img: "/SDGs/SDGs.svg", key: KEYS.NO_POVERTY, disabled: "/SDGs/SDGs-17.svg" },
+		{ img: "/SDGs/SDGs-1.svg", key: KEYS.ZERO_HUNGER, disabled: "/SDGs/SDGs-18.svg" },
 		{
-			img: GoodHealth,
+			img: "/SDGs/SDGs-2.svg",
 			key: KEYS.GOOD_HEALTH_WELL_BEING,
-			disabled: GoodHealthDisabled,
+			disabled: "/SDGs/SDGs-19.svg",
 		},
 		{
-			img: QualityEducation,
+			img: "/SDGs/SDGs-3.svg",
 			key: KEYS.QUALITY_EDUCATION,
-			disabled: QualityEducationDisabled,
+			disabled: "/SDGs/SDGs-20.svg",
 		},
 		{
-			img: GenderEquality,
+			img: "/SDGs/SDGs-4.svg",
 			key: KEYS.GENDER_EQUALITY,
-			disabled: GenderEqualityDisabled,
+			disabled: "/SDGs/SDGs-21.svg",
 		},
 		{
-			img: CleanWater,
+			img: "/SDGs/SDGs-5.svg",
 			key: KEYS.CLEAN_WATER_SANITATION,
-			disabled: CleanWaterDisabled,
+			disabled: "/SDGs/SDGs-22.svg",
 		},
 		{
-			img: AffordableEnergy,
+			img: "/SDGs/SDGs-6.svg",
 			key: KEYS.AFFORDABLE_CLEAN_ENERGY,
-			disabled: AffordableEnergyDisabled,
+			disabled: "/SDGs/SDGs-23.svg",
 		},
 		{
-			img: DecentWork,
+			img: "/SDGs/SDGs-7.svg",
 			key: KEYS.DECENT_WORK_ECONOMIC_GROWTH,
-			disabled: DecentWorkDisabled,
+			disabled: "/SDGs/SDGs-24.svg",
 		},
 		{
-			img: IndustryInnovation,
+			img: "/SDGs/SDGs-8.svg",
 			key: KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE,
-			disabled: IndustryInnovationDisabled,
+			disabled: "/SDGs/SDGs-25.svg",
 		},
 		{
-			img: ReducedInequality,
+			img: "/SDGs/SDGs-9.svg",
 			key: KEYS.REDUCED_INEQUALITIES,
-			disabled: ReducedInequalityDisabled,
+			disabled: "/SDGs/SDGs-26.svg",
 		},
 		{
-			img: SustainableDevelopment,
+			img: "/SDGs/SDGs-10.svg",
 			key: KEYS.PARTNERSHIPS_FOR_GOALS,
-			disabled: SustainableDevelopmentDisabled,
+			disabled: "/SDGs/SDGs-27.svg",
 		},
 		{
-			img: SustainableCities,
+			img: "/SDGs/SDGs-11.svg",
 			key: KEYS.SUSTAINABLE_CITIES_COMMUNITIES,
-			disabled: SustainableCitiesDisabled,
+			disabled: "/SDGs/SDGs-28.svg",
 		},
 		{
-			img: ResponsibleConsumption,
+			img: "/SDGs/SDGs-12.svg",
 			key: KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION,
-			disabled: ResponsibleConsumptionDisabled,
+			disabled: "/SDGs/SDGs-29.svg",
 		},
 		{
-			img: ClimateAction,
+			img: "/SDGs/SDGs-13.svg",
 			key: KEYS.CLIMATE_ACTION,
-			disabled: ClimateActionDisabled,
+			disabled: "/SDGs/SDGs-30.svg",
 		},
 		{
-			img: LifeBelowWater,
+			img: "/SDGs/SDGs-14.svg",
 			key: KEYS.LIFE_BELOW_WATER,
-			disabled: LifeBelowWaterDisabled,
+			disabled: "/SDGs/SDGs-31.svg",
 		},
-		{ img: LifeOnLand, key: KEYS.LIFE_ON_LAND, disabled: LifeOnLandDisabled },
+		{ img: "/SDGs/SDGs-15.svg", key: KEYS.LIFE_ON_LAND, disabled: "/SDGs/SDGs-32.svg" },
 		{
-			img: PeaceJustice,
-			disabled: PeaceJusticeDisabled,
+			img: "/SDGs/SDGs-16.svg",
+			disabled: "/SDGs/SDGs-33.svg",
 			key: KEYS.PEACE_JUSTICE_STRONG_INSTITUTIONS,
 		},
 	];

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/index.jsx

@@ -1,56 +1,55 @@
 import Widget from "../index.jsx";
 import styled from "styled-components";
 import { getGoalConfig } from "./config.js";
+
 export default function SDGWidget({
-  title = "Sustainable Development Goals",
-  activeSdgGoals = [],
-  t = (key) => key,
-  ...props
+	title = "Sustainable Development Goals",
+	activeSdgGoals = [],
+	t = (key) => key,
+	...props
 }) {
-  const sdgConfig = getGoalConfig();
+	const sdgConfig = getGoalConfig();
 
-  return (
-    <Widget title={title} className={`with-border-header`} {...props}>
-      <SDGContainer>
-        {sdgConfig.map((item) => {
-          const isDisabled = !activeSdgGoals.includes(item.key);
+	return (
+		<Widget title={title} className={`with-border-header`} {...props}>
+			<SDGContainer>
+				{sdgConfig.map((item) => {
+					const isDisabled = !activeSdgGoals.includes(item.key);
 
-          return (
-            <div
-              key={item.key}
-              className={`sdg-item`}
-              style={{
-                backgroundImage: `url(${
-                  isDisabled ? item.disabled : item.img
-                })`,
-              }}
-            ></div>
-          );
-        })}
-      </SDGContainer>
-    </Widget>
-  );
+					return (
+						<div
+							key={item.key}
+							className={`sdg-item`}
+							style={{
+								backgroundImage: `url(${isDisabled ? item.disabled : item.img})`,
+							}}
+						></div>
+					);
+				})}
+			</SDGContainer>
+		</Widget>
+	);
 }
 
 const SDGContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  gap: 8px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+	gap: 8px;
 
-  .sdg-item {
-    height: 100px;
-    width: 100px;
-    border-radius: 8px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
+	.sdg-item {
+		height: 50px;
+		width: 50px;
+		border-radius: 8px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
 
-  .sdg-item-content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    color: white;
-    text-align: center;
-  }
+	.sdg-item-content {
+		display: flex;
+		align-items: center;
+		height: 100%; 
+		color: white;
+		text-align: center;
+	}
 `;

package/src/index.js

@@ -26,10 +26,10 @@ export { default as CustomIcon } from "./@daf/core/components/Icon/CustomIcon.js
 
 // Filters
 export {
-  default as SelectFilters,
-  CustomSelect as SelectFiltersSelect,
-  Timeframe as SelectFiltersTimeFrame,
-  AjaxSelect as SelectFiltersAjaxSelect,
+	default as SelectFilters,
+	CustomSelect as SelectFiltersSelect,
+	Timeframe as SelectFiltersTimeFrame,
+	AjaxSelect as SelectFiltersAjaxSelect,
 } from "./@daf/core/components/Filters/selectFilters/index.jsx";
 export { default as SearchFilters } from "./@daf/core/components/Filters/searchFilters/index.jsx";
 
@@ -70,6 +70,7 @@ export { default as KeyIndicatorsDetails } from "./@daf/core/components/Dashboar
 export { default as DetailsSection } from "./@daf/core/components/Dashboard/Widget/DetailsSection/index.jsx";
 export { default as ComponentWithFocus } from "./@daf/core/components/Dashboard/ComponentWithFocus/index.jsx";
 export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
+export { default as SDGWidget } from "./@daf/core/components/Dashboard/Widget/SDGWidget/index.jsx";
 
 // Forms
 export { default as ViewForm } from "./@daf/core/components/ViewForm/content.jsx";
@@ -99,10 +100,7 @@ export { default as ProjectVisualisationSelect } from "./@daf/core/components/Pr
 export { default as ProjectVisualisationAlert } from "./@daf/core/components/ProjectVisualisation/Alert/index.js";
 
 // Sidenav
-export {
-  default as Sidenav,
-  useMenu,
-} from "./@daf/core/components/Sidenav/index.jsx";
+export { default as Sidenav, useMenu } from "./@daf/core/components/Sidenav/index.jsx";
 export { default as SidenavMenu } from "./@daf/core/components/Sidenav/Menu.jsx";
 
 // Other