datastake-daf 0.6.173 → 0.6.174

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$u = ["width", "height", "size", "name", "fill"];
+const _excluded$v = ["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$u);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   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$t = ["view", "module", "scope", "form", "meta"];
+const _excluded$u = ["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$t);
+    rest = _objectWithoutProperties(data, _excluded$u);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10029,7 +10029,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$s = ["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$t = ["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 = [],
@@ -10060,7 +10060,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -10782,7 +10782,7 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-const _excluded$r = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$s = ["size", "maxHeight", "dataSource", "columns", "pagination"];
 function StickyTable(_ref) {
   let {
       size = null,
@@ -10791,7 +10791,7 @@ function StickyTable(_ref) {
       columns = {},
       pagination = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11256,7 +11256,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$q = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$r = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11270,7 +11270,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$q);
+    restProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11504,12 +11504,12 @@ const Style$I = dt.div`
   }
 `;
 
-const _excluded$p = ["children"];
+const _excluded$q = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/jsxRuntime.jsx(Style$I, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11649,12 +11649,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$o = ["icon"];
+const _excluded$p = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11973,7 +11973,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$n = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$o = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$k
 } = antd.theme;
@@ -12066,7 +12066,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$n);
+    restProps = _objectWithoutProperties(_ref, _excluded$o);
   const {
     token
   } = useToken$k();
@@ -12769,7 +12769,7 @@ DAFHeader.propTypes = {
   filtersConfig: PropTypes__default["default"].any
 };
 
-const _excluded$m = ["tabs", "onChange", "value", "className"];
+const _excluded$n = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12777,7 +12777,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -12874,7 +12874,7 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$l = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const _excluded$m = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
 const useFooter = _ref => {
   let {
     leftContent,
@@ -12909,7 +12909,7 @@ const useFooter = _ref => {
                 style = {},
                 className = ""
               } = button,
-              restProps = _objectWithoutProperties(button, _excluded$l);
+              restProps = _objectWithoutProperties(button, _excluded$m);
             return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
@@ -15239,7 +15239,8 @@ function Widget(_ref) {
     defaultExpanded,
     isCollapsable = false,
     defaultCollapsed = false,
-    onExpandChange
+    onExpandChange,
+    description
   } = _ref;
   const [showFilters, setShowFilters] = React.useState(false);
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
@@ -15277,11 +15278,15 @@ function Widget(_ref) {
       className: "widget-header flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row widget-header-items",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "title cont",
-          children: /*#__PURE__*/jsxRuntime.jsx("h1", {
-            children: title
-          })
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "title cont",
+            children: /*#__PURE__*/jsxRuntime.jsx("h1", {
+              children: title
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            children: description
+          })]
         }), tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "cont icon-cont",
           children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
@@ -15396,10 +15401,11 @@ Widget.propTypes = {
   addedHeaderFirst: PropTypes__default["default"].bool,
   isCollapsable: PropTypes__default["default"].bool,
   defaultCollapsed: PropTypes__default["default"].bool,
-  onExpandChange: PropTypes__default["default"].func
+  onExpandChange: PropTypes__default["default"].func,
+  description: PropTypes__default["default"].string
 };
 
-const _excluded$k = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText"];
+const _excluded$l = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText"];
 function ImageWidget(_ref) {
   let {
       loading = false,
@@ -15409,7 +15415,7 @@ function ImageWidget(_ref) {
       imgAlt,
       noDescriptionText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     loading: loading,
     title: title,
@@ -15466,7 +15472,7 @@ function ImageWidget(_ref) {
 }
 
 var _templateObject$a;
-const _excluded$j = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
+const _excluded$k = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
 function FlowWidget(_ref) {
   let {
       title,
@@ -15478,7 +15484,7 @@ function FlowWidget(_ref) {
       className,
       direction = "horizontal"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   const [activeTab, setActiveTab] = React.useState();
   React.useEffect(() => {
     if (defaultActiveTab) {
@@ -18252,6 +18258,112 @@ const Style$B = dt.div`
   }
 `;
 
+const {
+  Option
+} = antd.Select;
+const DEFAULT_STEP = 20;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const STEP_SISTERS = ["#F04438", "#FF7A45", "#FFA940", "#95DE64", "#12B76A"]; // NOT REAL STEP SISTERS, JUST COLORS. 😂
+
+function SliderItem({
+  filter,
+  onFilterChange
+}) {
+  const [range, setRange] = React.useState([DEFAULT_MIN, DEFAULT_MAX]);
+  const min = filter?.min ?? DEFAULT_MIN;
+  const max = filter?.max ?? DEFAULT_MAX;
+  const step = filter?.step ?? DEFAULT_STEP;
+  const marks = React.useMemo(() => {
+    const marksObj = {};
+    for (let i = min; i <= max; i += step) {
+      marksObj[i] = `${i}%`;
+    }
+    return marksObj;
+  }, [min, max, step]);
+  const getColorForValue = (start, end) => {
+    const s = Number(start);
+    const e = Number(end);
+    if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
+    const valueToStartIndex = v => {
+      let idx = Math.floor((v - min) / step);
+      if (idx < 0) idx = 0;
+      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+      return idx;
+    };
+    const valueToEndIndex = v => {
+      let idx = Math.ceil((v - min) / step) - 1;
+      if (idx < 0) idx = 0;
+      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+      return idx;
+    };
+    let startIndex = valueToStartIndex(Math.min(s, e));
+    let endIndex = valueToEndIndex(Math.max(s, e));
+    if (endIndex < startIndex) endIndex = startIndex;
+    const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
+    if (colorsInRange.length === 0) return "transparent";
+    if (colorsInRange.length === 1) return colorsInRange[0];
+    const sliceSize = 100 / colorsInRange.length;
+    const gradientStops = colorsInRange.map((color, i) => {
+      const startPct = +(i * sliceSize).toFixed(4);
+      const endPct = +((i + 1) * sliceSize).toFixed(4);
+      return `${color} ${startPct}% ${endPct}%`;
+    }).join(", ");
+    return `linear-gradient(to right, ${gradientStops})`;
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "form-row",
+    children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+      children: filter?.label
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+      value: `${range[0]} - ${range[1]}`,
+      dropdownRender: () => /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          padding: "10px"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
+          theme: {
+            components: {
+              Slider: {
+                dotSize: 13
+              }
+            }
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Slider, {
+            range: true,
+            min: min,
+            max: max,
+            value: range,
+            step: null,
+            onChange: val => {
+              setRange(val);
+              onFilterChange({
+                [filter?.key]: val
+              });
+            },
+            tooltip: {
+              open: false
+            },
+            marks: marks,
+            styles: {
+              track: {
+                background: "transparent"
+              },
+              tracks: {
+                background: getColorForValue(range[0], range[1])
+              }
+            }
+          })
+        })
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsxs(Option, {
+        value: `${range[0]}-${range[1]}`,
+        children: [range[0], " - ", range[1]]
+      }, `${range[0]}-${range[1]}`)
+    })]
+  });
+}
+
 function Filters({
   t,
   filtersConfig,
@@ -18275,6 +18387,11 @@ function Filters({
             })
           })]
         });
+      case "slider":
+        return /*#__PURE__*/jsxRuntime.jsx(SliderItem, {
+          filter: filter,
+          onFilterChange: onFilterChange
+        });
       default:
         return null;
     }
@@ -20159,14 +20276,14 @@ const MapConfig = ({
   });
 };
 
-const _excluded$i = ["config", "title", "loading"];
+const _excluded$j = ["config", "title", "loading"];
 const Details = _ref => {
   let {
       config = [],
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header card",
     loading: loading,
@@ -20182,14 +20299,14 @@ const Details = _ref => {
   }));
 };
 
-const _excluded$h = ["config", "title", "loading"];
+const _excluded$i = ["config", "title", "loading"];
 const KeyIndicatorsDetails = _ref => {
   let {
       config,
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    rest = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header",
     title: title,
@@ -20219,7 +20336,7 @@ const Style$y = dt.div`
     }    
 `;
 
-const _excluded$g = ["children", "config", "detailsTitle", "firstColumnWidth"];
+const _excluded$h = ["children", "config", "detailsTitle", "firstColumnWidth"];
 const DetailsSection = _ref => {
   let {
       children,
@@ -20227,7 +20344,7 @@ const DetailsSection = _ref => {
       detailsTitle,
       firstColumnWidth = "250px"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/jsxRuntime.jsx(Style$y, {
     firstColumnWidth: firstColumnWidth,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -20403,14 +20520,14 @@ const getGoalConfig = () => {
 };
 
 var _templateObject$8;
-const _excluded$f = ["title", "activeSdgGoals", "t"];
+const _excluded$g = ["title", "activeSdgGoals", "t"];
 function SDGWidget(_ref) {
   let {
       title = "Sustainable Development Goals",
       activeSdgGoals = [],
       t = key => key
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   const sdgConfig = getGoalConfig();
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     title: title,
@@ -20506,15 +20623,18 @@ const SDGList = dt.ul`
     justify-content: center;
     background: var(--base-gray-30);
     color: var(--base-gray-90);
+    border-radius: 8px;
+    border: 1px solid var(--base-gray-30);
   }
 `;
 
 const GAP_BETWEEN_SDGS = 4;
-function SDGIcons({
-  sdgList = [],
-  t = str => str,
-  iconSize = 24
-}) {
+function SDGIcons(_ref) {
+  let {
+    sdgList = [],
+    t = str => str,
+    iconSize = 24
+  } = _ref;
   const containerRef = React__default["default"].useRef(null);
   const [width, setWidth] = React__default["default"].useState(0);
   React__default["default"].useEffect(() => {
@@ -20555,10 +20675,10 @@ function SDGIcons({
       children: [visibleSdgs.map((sdg, index) => /*#__PURE__*/jsxRuntime.jsx("li", {
         className: "project-widget-item",
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: t(`SDGS::${sdg}`),
+          title: t("SDGS::".concat(sdg)),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
-              backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+              backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")"),
               height: iconSize,
               width: iconSize
             },
@@ -20577,21 +20697,25 @@ function SDGIcons({
               maxWidth: 200
             },
             children: sdgList.slice(visibleSdgs.length).map((sdg, idx) => /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-              title: t(`SDGS::${sdg}`),
+              title: t("SDGS::".concat(sdg)),
               children: /*#__PURE__*/jsxRuntime.jsx("div", {
                 style: {
                   width: iconSize,
                   height: iconSize,
-                  backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+                  backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")"),
                   backgroundSize: "cover",
                   borderRadius: 4
                 },
-                title: t(`SDGS::${sdg}`)
+                title: t("SDGS::".concat(sdg))
               })
             }, idx))
           }),
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "sdg-item-image sdg-item-more",
+            style: {
+              height: iconSize,
+              width: iconSize
+            },
             children: ["+", hiddenCount]
           })
         })
@@ -20614,7 +20738,7 @@ function SdgList({
   });
 }
 
-const _excluded$e = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
+const _excluded$f = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
 const {
   Meta
 } = antd.Card;
@@ -20634,7 +20758,7 @@ function ProjectWidget(_ref) {
       hideSDGList = false,
       t = x => x
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   const [isHovered, setIsHovered] = React__default["default"].useState(false);
   const {
     token
@@ -20797,13 +20921,13 @@ const WidgetCard = _ref => {
   });
 };
 
-const _excluded$d = ["title", "children"];
+const _excluded$e = ["title", "children"];
 function CarouselWidget(_ref) {
   let {
       title,
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   /**
    * Handles carousel slide change events
    * @param {number} currentSlide - The index of the current slide after change
@@ -20823,7 +20947,7 @@ function CarouselWidget(_ref) {
   });
 }
 
-const _excluded$c = ["title", "images", "height", "fallback"];
+const _excluded$d = ["title", "images", "height", "fallback"];
 function ImageCarousel(_ref) {
   let {
       title,
@@ -20831,7 +20955,7 @@ function ImageCarousel(_ref) {
       height = 400,
       fallback = "/assets/images/empty-box.svg"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
   const [current, setCurrent] = React.useState(0);
   const carouselRef = React.useRef(null);
@@ -26012,7 +26136,7 @@ const RepeatableModals = ({
   }) : null;
 };
 
-const _excluded$b = ["viewGroup"],
+const _excluded$c = ["viewGroup"],
   _excluded2 = ["label", "icon", "position"];
 const Content = _ref => {
   let {
@@ -26080,7 +26204,7 @@ const Content = _ref => {
       if (groups[gKey].viewGroup === key) {
         // eslint-disable-next-line no-unused-vars
         const _groups$gKey = groups[gKey],
-          gCfg = _objectWithoutProperties(_groups$gKey, _excluded$b);
+          gCfg = _objectWithoutProperties(_groups$gKey, _excluded$c);
         items[gKey] = gCfg;
       }
       return items;
@@ -42188,7 +42312,7 @@ const getGrouContent = (form, values, i, formId, excludedKeys, getData, setValue
   });
 };
 
-const _excluded$a = ["icon"];
+const _excluded$b = ["icon"];
 function DynamicForm(_ref) {
   var _data$meta;
   let {
@@ -42743,7 +42867,7 @@ function DynamicForm(_ref) {
           let {
               icon: Icon
             } = _ref3,
-            form = _objectWithoutProperties(_ref3, _excluded$a);
+            form = _objectWithoutProperties(_ref3, _excluded$b);
           return /*#__PURE__*/jsxRuntime.jsxs(antd.Button, {
             type: "link",
             size: "large",
@@ -43019,6 +43143,35 @@ function MultiBarProgress(_ref) {
 }
 const Style$r = dt.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n\theight: 6px;\n\twidth: 100%;\n\tbackground: var(--base-gray-40);\n\tborder-radius: 8px;\n\tdisplay: flex;\n\toverflow: hidden;\n\tdiv {\n\t\theight: 100%;\n\t}\n"])));
 
+const _excluded$a = ["tooltipTitle", "percentage", "strokeColor", "showInfo"];
+function MultiColorProgressBar(_ref) {
+  let {
+      tooltipTitle,
+      percentage,
+      strokeColor = {
+        '0%': '#32D583',
+        '50%': '#FEC84B',
+        '100%': '#F97066'
+      },
+      showInfo = false
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$a);
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+    title: tooltipTitle,
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Progress, _objectSpread2({
+      percent: percentage,
+      strokeColor: strokeColor,
+      showInfo: showInfo
+    }, rest))
+  });
+}
+MultiColorProgressBar.propTypes = {
+  tooltipTitle: PropTypes__default["default"].string,
+  percentage: PropTypes__default["default"].number,
+  strokeColor: PropTypes__default["default"].object,
+  showInfo: PropTypes__default["default"].bool
+};
+
 var _templateObject$4;
 const Style$q = dt.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n    .icon-background {\n        width: ", "px;\n        height: ", "px;\n        background-color: #69d99e;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n"])), _ref => {
   let {
@@ -60236,6 +60389,7 @@ exports.MoreMenu = MoreMenu;
 exports.MoreOptions = MoreOptions;
 exports.MoreTags = MoreTags;
 exports.MultiBarProgress = MultiBarProgress;
+exports.MultiColorProgressBar = MultiColorProgressBar;
 exports.Multiselect = Multiselect;
 exports.NotFound = NotFound;
 exports.Pagination = Pagination;
@@ -60254,6 +60408,7 @@ exports.ProjectVisualisationSelect = CustomSelect;
 exports.ProjectWidget = ProjectWidget;
 exports.RadarChart = RadarChart;
 exports.RadialBarChart = RadialBarChart;
+exports.SDGIcons = SDGIcons;
 exports.SDGWidget = SDGWidget;
 exports.SearchFilters = SearchFilters;
 exports.Segment = Segment;

package/package.json

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

package/src/@daf/core/components/Dashboard/Widget/Widget.stories.js

@@ -55,3 +55,12 @@ export const Primary = {
 		// },
 	},
 };
+
+export const WithDescription = {
+	name: "Widget with Description",
+	args: {
+		className: "with-border-header",
+		title: "Widget Title",
+		description: "This is a description of the widget.",
+	},
+};

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

@@ -35,6 +35,7 @@ export default function Widget({
 	isCollapsable = false,
 	defaultCollapsed = false,
 	onExpandChange,
+	description,
 }) {
 	const [showFilters, setShowFilters] = useState(false);
 	const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
@@ -77,8 +78,11 @@ export default function Widget({
 			{!noTitle && (
 				<div className="widget-header flex-column">
 					<div className="flex flex-row widget-header-items">
-						<div className="title cont">
-							<h1>{title}</h1>
+						<div>
+							<div className="title cont">
+								<h1>{title}</h1>
+							</div>
+							<p>{description}</p>
 						</div>
 
 						{tooltip && (
@@ -213,4 +217,5 @@ Widget.propTypes = {
 	isCollapsable: PropTypes.bool,
 	defaultCollapsed: PropTypes.bool,
 	onExpandChange: PropTypes.func,
+	description: PropTypes.string,
 };

package/src/@daf/core/components/Filters/FloatingFilters/FloatingFilters.stories.jsx

@@ -0,0 +1,61 @@
+import SearchFilters from "./index";
+import ThemeLayout from "../../ThemeLayout";
+
+export default {
+  title: "Core/Filters/FloatingFilters",
+  component: SearchFilters,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ThemeLayout>
+        <Story />
+      </ThemeLayout>
+    ),
+  ],
+};
+
+export const Primary = {
+  name: "Search Filters",
+  args: {
+    t: (key) => key,
+    filtersConfig: [
+      {
+        type: "select",
+        label: "Category",
+        placeholder: "Select a category",
+        key: "category",
+        options: [
+          { label: "Books", value: "books" },
+          { label: "Electronics", value: "electronics" },
+          { label: "Clothing", value: "clothing" },
+        ],
+        value: null,
+      },
+      {
+        type: "select",
+        label: "Price Range",
+        placeholder: "Select a price range",
+        key: "priceRange",
+        options: [
+          { label: "$0 - $50", value: "0-50" },
+          { label: "$51 - $100", value: "51-100" },
+          { label: "$101 - $200", value: "101-200" },
+        ],
+        value: null,
+      },
+      {
+        type: "slider",
+        label: "Rating",
+        key: "rating",
+      },
+    ],
+    onFilterChange: (changedFilter) => {
+      console.log("Filter changed:", changedFilter);
+    },
+  },
+  render: (args) => (
+    <div style={{ position: "relative", height: "400px" }}>
+      <SearchFilters {...args} />
+    </div>
+  ),
+};

package/src/@daf/core/components/Filters/FloatingFilters/components/Slider/index.jsx

@@ -0,0 +1,120 @@
+import { Select, Slider, ConfigProvider } from "antd";
+import { useState, useMemo } from "react";
+
+const { Option } = Select;
+
+const DEFAULT_STEP = 20;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+
+const STEP_SISTERS = ["#F04438", "#FF7A45", "#FFA940", "#95DE64", "#12B76A"]; // NOT REAL STEP SISTERS, JUST COLORS. 😂
+
+export default function SliderItem({ filter, onFilterChange }) {
+  const [range, setRange] = useState([DEFAULT_MIN, DEFAULT_MAX]);
+
+  const min = filter?.min ?? DEFAULT_MIN;
+  const max = filter?.max ?? DEFAULT_MAX;
+  const step = filter?.step ?? DEFAULT_STEP;
+
+  const marks = useMemo(() => {
+    const marksObj = {};
+    for (let i = min; i <= max; i += step) {
+      marksObj[i] = `${i}%`;
+    }
+    return marksObj;
+  }, [min, max, step]);
+
+  const getColorForValue = (start, end) => {
+    const s = Number(start);
+    const e = Number(end);
+    if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
+
+    const valueToStartIndex = (v) => {
+      let idx = Math.floor((v - min) / step);
+      if (idx < 0) idx = 0;
+      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+      return idx;
+    };
+
+    const valueToEndIndex = (v) => {
+      let idx = Math.ceil((v - min) / step) - 1;
+      if (idx < 0) idx = 0;
+      if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
+      return idx;
+    };
+
+    let startIndex = valueToStartIndex(Math.min(s, e));
+    let endIndex = valueToEndIndex(Math.max(s, e));
+
+    if (endIndex < startIndex) endIndex = startIndex;
+
+    const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
+
+    if (colorsInRange.length === 0) return "transparent";
+    if (colorsInRange.length === 1) return colorsInRange[0];
+
+    const sliceSize = 100 / colorsInRange.length;
+    const gradientStops = colorsInRange
+      .map((color, i) => {
+        const startPct = +(i * sliceSize).toFixed(4);
+        const endPct = +((i + 1) * sliceSize).toFixed(4);
+        return `${color} ${startPct}% ${endPct}%`;
+      })
+      .join(", ");
+
+    return `linear-gradient(to right, ${gradientStops})`;
+  };
+
+  return (
+    <div className="form-row">
+      <label>{filter?.label}</label>
+      <Select
+        value={`${range[0]} - ${range[1]}`}
+        dropdownRender={() => (
+          <div style={{ padding: "10px" }}>
+            <ConfigProvider
+              theme={{
+                components: {
+                  Slider: {
+                    dotSize: 13,
+                  },
+                },
+              }}
+            >
+              <Slider
+                range
+                min={min}
+                max={max}
+                value={range}
+                step={null}
+                onChange={(val) => {
+                  setRange(val);
+                  onFilterChange({ [filter?.key]: val });
+                }}
+                tooltip={{
+                  open: false,
+                }}
+                marks={marks}
+                styles={{
+                  track: {
+                    background: "transparent",
+                  },
+                  tracks: {
+                    background: getColorForValue(range[0], range[1]),
+                  },
+                }}
+              />
+            </ConfigProvider>
+          </div>
+        )}
+      >
+        <Option
+          value={`${range[0]}-${range[1]}`}
+          key={`${range[0]}-${range[1]}`}
+        >
+          {range[0]} - {range[1]}
+        </Option>
+      </Select>
+    </div>
+  );
+}

package/src/@daf/core/components/Filters/FloatingFilters/index.js

@@ -2,44 +2,47 @@ import { Button, Select } from "antd";
 import CustomIcon from "../../Icon/CustomIcon.jsx";
 import { Fragment, useState } from "react";
 import Style from "./style.js";
+import SliderItem from "./components/Slider/index.jsx";
 
 export default function Filters({ t, filtersConfig, onFilterChange }) {
-	const [opened, setOpened] = useState(false);
+  const [opened, setOpened] = useState(false);
 
-	const renderFilter = (filter) => {
-		switch (filter.type) {
-			case "select":
-				return (
-					<div className="form-row">
-						<label>{filter.label}</label>
-						<Select
-							allowClear
-							placeholder={filter.placeholder}
-							value={filter.value}
-							options={filter.options}
-							onChange={(c) => onFilterChange({ [filter.key]: c })}
-						/>
-					</div>
-				);
-			default:
-				return null;
-		}
-	};
+  const renderFilter = (filter) => {
+    switch (filter.type) {
+      case "select":
+        return (
+          <div className="form-row">
+            <label>{filter.label}</label>
+            <Select
+              allowClear
+              placeholder={filter.placeholder}
+              value={filter.value}
+              options={filter.options}
+              onChange={(c) => onFilterChange({ [filter.key]: c })}
+            />
+          </div>
+        );
+      case "slider":
+        return <SliderItem filter={filter} onFilterChange={onFilterChange} />;
+      default:
+        return null;
+    }
+  };
 
-	return (
-		<Style>
-			<Button onClick={() => setOpened((p) => !p)}>
-				{t("Filter")}
-				<CustomIcon width={16} height={16} name="Filter" />
-			</Button>
+  return (
+    <Style>
+      <Button onClick={() => setOpened((p) => !p)}>
+        {t("Filter")}
+        <CustomIcon width={16} height={16} name="Filter" />
+      </Button>
 
-			{opened ? (
-				<div className="filters">
-					{filtersConfig?.map((filter) => (
-						<Fragment key={filter.key}>{renderFilter(filter)}</Fragment>
-					))}
-				</div>
-			) : null}
-		</Style>
-	);
+      {opened ? (
+        <div className="filters">
+          {filtersConfig?.map((filter) => (
+            <Fragment key={filter.key}>{renderFilter(filter)}</Fragment>
+          ))}
+        </div>
+      ) : null}
+    </Style>
+  );
 }

package/src/@daf/core/components/ProgressBar/MultiColorProgressBar/MultiColorProgressBar.stories.js

@@ -0,0 +1,16 @@
+import MultiColorProgressBar from "./index";
+import ThemeLayout from "../../ThemeLayout";
+
+export default {
+  title: "Components/Progress/MultiColorProgressBar",
+  component: MultiColorProgressBar,
+  tags: ["autodocs"],
+}; 
+
+export const Primary = {
+  name: "Default",
+  args: {
+    percentage: 100,
+    tooltipTitle: "Custom Tooltip",
+  },
+};

package/src/@daf/core/components/ProgressBar/MultiColorProgressBar/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Tooltip, Progress } from 'antd'
+import PropTypes from 'prop-types'
+
+/**
+ * MultiColorProgressBar Component
+ * 
+ * A progress bar component that displays progress with a gradient color scheme and tooltip support.
+ * Built on top of Ant Design's Progress component, this wrapper provides a multi-color gradient
+ * that transitions from green (0%) to yellow (50%) to red (100%) by default.
+ *
+ * @param {Object} props - The component props
+ * @param {string} [props.tooltipTitle] - Text to display in the tooltip on hover
+ * @param {number} props.percentage - The progress percentage (0-100)
+ * @param {Object} [props.strokeColor] - Gradient color configuration object with percentage keys
+ * @param {string} [props.strokeColor."0%"] - Start color of the gradient (default: '#32D583' - green)
+ * @param {string} [props.strokeColor."50%"] - Middle color of the gradient (default: '#FEC84B' - yellow)  
+ * @param {string} [props.strokeColor."100%"] - End color of the gradient (default: '#F97066' - red)
+ * @param {boolean} [props.showInfo=false] - Whether to display the percentage text on the progress bar
+ * @param {...Object} [props.rest] - Additional props passed to the underlying Ant Design Progress component
+ * 
+ */
+function MultiColorProgressBar({
+    tooltipTitle,
+    percentage,
+    strokeColor = {
+        '0%': '#32D583',
+        '50%': '#FEC84B',
+        '100%': '#F97066',
+    },
+    showInfo = false,
+    ...rest
+})  {
+  return (
+    <Tooltip title={tooltipTitle}>
+        <Progress
+            percent={percentage}
+            strokeColor={strokeColor}
+            showInfo={showInfo}
+            {...rest}
+        />
+    </Tooltip>
+  )
+}
+
+MultiColorProgressBar.propTypes = {
+    tooltipTitle: PropTypes.string,
+    percentage: PropTypes.number,
+    strokeColor: PropTypes.object,
+    showInfo: PropTypes.bool,
+}
+
+export default MultiColorProgressBar

package/src/@daf/core/components/UI/SDGIcon/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Tooltip, Popover } from "antd";
-import { SDG_IMAGES } from "../../../../../constants/SDGs";
-import { SDGList } from "./styles";
+import { SDG_IMAGES } from "../../../../../constants/SDGs.js";
+import { SDGList } from "./styles.js";
 
 const GAP_BETWEEN_SDGS = 4;
 
@@ -90,7 +90,15 @@ export default function SDGIcons({
                 </div>
               }
             >
-              <div className="sdg-item-image sdg-item-more">+{hiddenCount}</div>
+              <div
+                className="sdg-item-image sdg-item-more"
+                style={{
+                  height: iconSize,
+                  width: iconSize,
+                }}
+              >
+                +{hiddenCount}
+              </div>
             </Popover>
           </li>
         )}

package/src/@daf/core/components/UI/SDGIcon/styles.js

@@ -22,5 +22,7 @@ export const SDGList = styled.ul`
     justify-content: center;
     background: var(--base-gray-30);
     color: var(--base-gray-90);
+    border-radius: 8px;
+    border: 1px solid var(--base-gray-30);
   }
 `;

package/src/index.js

@@ -23,7 +23,6 @@ export { default as Badge } from "./@daf/core/components/Badge/index.jsx";
 // Icons
 export { default as GetIcon } from "./@daf/core/components/Icon/index.jsx";
 export { default as CustomIcon } from "./@daf/core/components/Icon/CustomIcon.jsx";
-
 // Filters
 export {
   default as SelectFilters,
@@ -89,6 +88,7 @@ export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/co
 // Progress Bar
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";
 export { default as MultiBarProgress } from "./@daf/core/components/ProgressBar/MultiBarProgress/index.jsx";
+export { default as MultiColorProgressBar } from "./@daf/core/components/ProgressBar/MultiColorProgressBar/index.jsx";
 export { default as ProgressBarSideIcon } from "./@daf/core/components/ProgressBar/components/SideIcon/index.jsx";
 export { default as ProgressTabs } from "./@daf/core/components/ProgressTabs/index.jsx";
 
@@ -162,3 +162,6 @@ export { default as InformationChannelsSubject } from "./@daf/core/components/Sc
 export { default as InformationChannelsView } from "./@daf/core/components/Screens/InformationChannels/InformationChannel/index.js";
 export { default as InformationChannelsDataPoint } from "./@daf/core/components/Screens/InformationChannels/DataPoint/index.js";
 export { InformationChannelProvider } from "./@daf/core/components/Screens/InformationChannels/context/index.js";
+
+// UI
+export { default as SDGIcons } from "./@daf/core/components/UI/SDGIcon/index.jsx";