datastake-daf 0.6.205 → 0.6.207

package/dist/components/index.js

@@ -3164,7 +3164,7 @@ const config$3 = {
   LinkChain: config$4
 };
 
-const _excluded$u = ["width", "height", "size", "name", "fill"];
+const _excluded$v = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3173,7 +3173,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), {}, {
@@ -9375,7 +9375,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);
@@ -9749,7 +9749,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
@@ -10128,7 +10128,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 = [],
@@ -10159,7 +10159,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);
@@ -11002,8 +11002,8 @@ var unitlessKeys = {
 
 var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.12",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process.env.NODE_ENV){var o=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(o," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},React.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j(t%k)+n;return (j(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L$1(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,W=G?Symbol.for("react.forward_ref"):60112,q={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},H={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},U={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},J=((V={})[W]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:q;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function oe(e,t,n){if("string"!=typeof t){if(ne){var o=te(t);o&&o!==ne&&oe(e,o,n);}var r=K(t);Q&&(r=r.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<r.length;++a){var c=r[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function re(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],o=1;o<e.length;o++)n+=t?t+e[o]:e[o];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=!1),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var o=0;o<t.length;o++)e[o]=le(e[o],t[o]);else if(ce(t))for(var o in t)e[o]=le(e[o],t[o]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],o=[],r=1,s=e.length;r<s;r+=1)o.push(e[r]);return o.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];return "production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,!1)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,o=n.length,r=o;e>=r;)if((r<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(r),this.groupSizes.set(n),this.length=r;for(var s=o;s<r;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(var r=n;r<o;r++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],o=this.indexOfGroup(e),r=o+n,s=o;s<r;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var o,r=n.split(","),s=0,i=r.length;s<i;s++)(o=r[s])&&e.registerName(t,o);},Pe=function(e,t){for(var n,o=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),r=[],s=0,i=o.length;s<i;s++){var a=o[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,r)),r.length=0;}else r.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,o=t.length;n<o;n++){var r=t[n];r&&r.getAttribute(f)!==m&&(Pe(e,r),r.parentNode&&r.parentNode.removeChild(r));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,o=document.createElement("style"),r=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==r?r.nextSibling:null;o.setAttribute(f,m),o.setAttribute(y,v);var i=Ce();return i&&o.setAttribute("nonce",i),n.insertBefore(o,s),o},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,o=t.length;n<o;n++){var r=t[n];if(r.ownerNode===e)return r}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return !1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w},ke=function(){function e(e,n,o){void 0===e&&(e=C),void 0===n&&(n={});var r=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(o),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=!1,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,o="",r=function(n){var r=function(e){return ve.get(e)}(n);if(void 0===r)return "continue";var s=e.names.get(r),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(r,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),o+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)r(s);return o}(r)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,o){return void 0===o&&(o=!0),new e(__assign(__assign({},this.options),n),this.gs,o&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,o,r=void 0===e?C:e,s=r.options,i=void 0===s?C:s,a=r.plugins,c$1=void 0===a?_:a,l=function(e,o,r){return r.startsWith(n)&&r.endsWith(n)&&r.replaceAll(n,"").length>0?".".concat(t):e},u=c$1.slice();u.push(function(e){e.type===c&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(o,l));}),i.prefix&&u.push(de$1),u.push(he$1);var p=function(e,r,s,a){void 0===r&&(r=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=r,o=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=ue$1(s||r?"".concat(s," ").concat(r," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return pe$1(l,be$1(u.concat(we$1(function(e){return p.push(e)})))),p};return p.hash=c$1.length?c$1.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=React__default["default"].createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;React__default["default"].createContext(void 0);function Ge(){return React.useContext($e)}var We=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ze);var o=n.name+t.hash;e.hasNameForId(n.id,o)||e.insertRules(n.id,o,t(n.rules,o,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),qe=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var o=e[n];if(1===n&&"-"===o&&"-"===e[0])return e;qe(o)?t+="-"+o.toLowerCase():t+=o;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||!1===e||""===e},Je=function(t){var n,o,r=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||re(i)?r.push("".concat(He(s),":"),i,";"):ce(i)?r.push.apply(r,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),!1),["}"],!1)):r.push("".concat(He(s),": ").concat((n=s,null==(o=i)||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||n in unitlessKeys||n.startsWith("--")?String(o).trim():"".concat(o,"px")),";")));}return r};function Xe(e,t,n,o){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(re(e)){if(!re(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var r=e(t);return "production"===process.env.NODE_ENV||"object"!=typeof r||Array.isArray(r)||r instanceof We||ce(r)||null===r||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(r,t,n,o)}var s;return e instanceof We?n?(e.inject(n,o),[e.getName(o)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_,e.map(function(e){return Xe(e,t,n,o)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(re(n)&&!se(n))return !1}return !0}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var o=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))o=ie(o,this.staticRulesId);else {var r=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,r)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(r,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}o=ie(o,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),o=ie(o,d);}}return o},e}(),et=React__default["default"].createContext(void 0);et.Consumer;var rt={},st=new Set;function it(e,r,s){var i=se(e),a=e,c=!L$1(e),p=r.attrs,d=void 0===p?_:p,h=r.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);rt[n]=(rt[n]||0)+1;var o="".concat(n,"-").concat($(v+n+rt[n]));return t?"".concat(t,"-").concat(o):o}(r.displayName,r.parentComponentId):h,m=r.displayName,y=void 0===m?function(e){return L$1(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=r.displayName&&r.componentId?"".concat(R(r.displayName),"-").concat(r.componentId):r.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=r.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(r.shouldForwardProp){var E=r.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,r){return function(e,r,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=React__default["default"].useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process.env.NODE_ENV&&React.useDebugValue(d);var v=I(r,f,c)||C,g=function(e,n,o){for(var r,s=__assign(__assign({},n),{className:void 0,theme:o}),i=0;i<e.length;i+=1){var a=re(r=e[i])?r(s):r;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,r,v),S=g.as||h,w={};for(var b in g)void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process.env.NODE_ENV||isPropValid(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),o=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process.env.NODE_ENV&&React.useDebugValue(o),o}(a,g);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L$1(S)&&!A.has(S)?"class":"className"]=N,w.ref=s,React.createElement(S,w)}(D,e,r)}O.displayName=y;var D=React__default["default"].forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var o=0,r=t;o<r.length;o++)le(e,r[o],!0);return e}({},a.defaultProps,e):e;}}),"production"!==process.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},o=!1;return function(r){if(!o&&(n[r]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),o=!0,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&oe(D,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),D}function at(e,t){for(var n=[e[0]],o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}var ct=function(e){return Object.assign(e,{isCss:!0})};function lt(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];if(re(t)||ce(t))return ct(Xe(at(_,__spreadArray([t],n,!0))));var r=t;return 0===n.length&&1===r.length&&"string"==typeof r[0]?Xe(r):ct(Xe(at(r,n)))}function ut(n,o,r){if(void 0===r&&(r=C),!o)throw he(1,o);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(o,r,lt.apply(void 0,__spreadArray([t],s,!1)))};return s.attrs=function(e){return ut(n,o,__assign(__assign({},r),{attrs:Array.prototype.concat(r.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,o,__assign(__assign({},r),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var St="__sc-".concat(f,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[St]||(window[St]=0),1===window[St]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[St]+=1);
 
-var _templateObject$c;
-const Style$J = dt.div(_templateObject$c || (_templateObject$c = _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$d;
+const Style$J = dt.div(_templateObject$d || (_templateObject$d = _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
@@ -11075,8 +11075,8 @@ function ComponentWithFocus(_ref) {
   });
 }
 
-var _templateObject$b;
-const _excluded$r = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
+var _templateObject$c;
+const _excluded$s = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
 function StickyTable(_ref) {
   let {
       size = "small",
@@ -11087,7 +11087,7 @@ function StickyTable(_ref) {
       pagination = false,
       doEmptyRows = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   const data = React__default["default"].useMemo(() => {
     if (!doEmptyRows) {
       return dataSource;
@@ -11133,7 +11133,7 @@ function StickyTable(_ref) {
     })
   });
 }
-const Style$I = dt.div(_templateObject$b || (_templateObject$b = _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$I = dt.div(_templateObject$c || (_templateObject$c = _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,
@@ -11583,7 +11583,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 = '',
@@ -11597,7 +11597,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,
@@ -11716,12 +11716,12 @@ const Style$H = 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$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11730,7 +11730,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$a;
+var _templateObject$b;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11848,7 +11848,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$G = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11861,12 +11861,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];
@@ -12185,7 +12185,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;
@@ -12278,7 +12278,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();
@@ -12979,7 +12979,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 = [],
@@ -12987,7 +12987,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({
@@ -13084,14 +13084,16 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const useFooter = ({
-  leftContent,
-  centerContent,
-  rightContent,
-  actionButtons,
-  app,
-  isViewMode
-}) => {
+const _excluded$m = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const useFooter = _ref => {
+  let {
+    leftContent,
+    centerContent,
+    rightContent,
+    actionButtons,
+    app,
+    isViewMode
+  } = _ref;
   const renderFooterContent = React.useMemo(() => {
     const FooterContent = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "daf-footer-content",
@@ -13107,18 +13109,18 @@ const useFooter = ({
           className: "daf-footer-actions",
           children: actionButtons.map((button, index) => {
             const {
-              label,
-              onClick,
-              icon,
-              type = BTN_TYPES.PRIMARY,
-              tooltip,
-              disabled = false,
-              loading = false,
-              style = {},
-              className = "",
-              ...restProps
-            } = button;
-            return /*#__PURE__*/jsxRuntime.jsx(DafButton, {
+                label,
+                onClick,
+                icon,
+                type = BTN_TYPES.PRIMARY,
+                tooltip,
+                disabled = false,
+                loading = false,
+                style = {},
+                className = ""
+              } = button,
+              restProps = _objectWithoutProperties(button, _excluded$m);
+            return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
               size: BTN_SIZE.MD,
@@ -13130,9 +13132,8 @@ const useFooter = ({
               loading: loading,
               title: tooltip,
               style: style,
-              className: className,
-              ...restProps
-            }, index);
+              className: className
+            }, restProps), index);
           })
         })]
       })]
@@ -13145,180 +13146,8 @@ const useFooter = ({
   };
 };
 
-const FooterContainer = dt.div`
-	.daf-footer {
-		background: #ffffff;
-		border-top: 1px solid #e8e8e8;
-		border-left: none;
-		border-right: none;
-		border-bottom: none;
-		border-radius: 0;
-		padding: 24px;
-		margin: 0;
-		box-shadow: none;
-		z-index: 100;
-		position: relative;
-		min-height: 80px;
-
-		&.daf-footer-fixed {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			z-index: 1000;
-		}
-
-		.daf-footer-content {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-			min-height: 32px;
-
-			.daf-footer-left {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-start;
-			}
-
-			.daf-footer-center {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.daf-footer-right {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-				gap: 12px;
-
-				.daf-footer-actions {
-					.ant-btn {
-						height: 40px;
-						padding: 0 24px;
-						border-radius: 6px;
-						font-weight: 500;
-						font-size: 14px;
-						transition: all 0.3s ease;
-						border: 1px solid transparent;
-
-						&.ant-btn-primary {
-							background-color: var(--color-primary-70);
-							color: #ffffff;
-							border-color: var(--color-primary-70);
-
-							&:hover {
-								background-color: var(--color-primary-60);
-								border-color: var(--color-primary-60);
-							}
-
-							&:active {
-								background-color: var(--color-primary-80);
-								border-color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-default {
-							background: #ffffff;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-ghost {
-							background: transparent;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-								background: rgba(0, 0, 0, 0.02);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	/* Responsive design */
-	@media (max-width: 768px) {
-		.daf-footer {
-			margin: 0;
-			padding: 16px;
-
-			.daf-footer-content {
-				flex-direction: column;
-				gap: 16px;
-				align-items: stretch;
-
-				.daf-footer-left,
-				.daf-footer-center,
-				.daf-footer-right {
-					flex: none;
-					justify-content: center;
-				}
-
-				.daf-footer-right {
-					.daf-footer-actions {
-						justify-content: center;
-					}
-				}
-			}
-		}
-	}
-
-	/* App-specific styling */
-	&.sbg-app {
-		.daf-footer {
-			background: #f8f9fa;
-			border-color: #e9ecef;
-		}
-	}
-
-	&.nashiriki-app {
-		.daf-footer {
-			background: #fff;
-			border-color: #d9d9d9;
-		}
-	}
-`;
+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"])));
 
 function DAFFooter(_ref) {
   let {
@@ -21397,7 +21226,7 @@ const WidgetCard = _ref => {
 };
 
 const _excluded$e = ["title", "children"];
-function CarouselWidget(_ref) {
+const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       title,
       children
@@ -21412,19 +21241,91 @@ function CarouselWidget(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: title,
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({
+      ref: ref
+    }, rest), {}, {
       children: children
     }))
   });
+});
+CarouselWidget.displayName = 'CarouselWidget';
+
+function CustomArrowButton({
+  icon,
+  onClick = () => {},
+  isLeft = false,
+  iconColor = "#666",
+  hoverIconColor = "#1890ff"
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? {
+    ...icon,
+    props: {
+      ...icon.props,
+      style: {
+        color: isHovered ? hoverIconColor : iconColor
+      }
+    }
+  } : icon;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+    type: "default",
+    shape: "circle",
+    icon: styledIcon,
+    onClick: onClick,
+    style: {
+      position: "absolute",
+      right: !isLeft ? "40px" : "auto",
+      left: !isLeft ? "auto" : "40px",
+      top: "58%",
+      transform: "translateY(-50%)",
+      zIndex: 10,
+      backgroundColor: "rgba(255, 255, 255, 0.4)",
+      border: "1px solid rgba(0, 0, 0, 0.1)",
+      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+      width: "40px",
+      height: "40px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+      setIsHovered(true);
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
+      setIsHovered(false);
+    }
+  });
 }
 
-const _excluded$d = ["title", "images", "height", "fallback"];
+const StyledCarouselWrapper = dt.div`
+  position: relative;
+  
+  .ant-carousel .slick-dots li button {
+    background: ${props => props.inactiveDotColor} !important;
+    opacity: 1 !important;
+  }
+  
+  .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important;
+    opacity: 1 !important;
+  }
+`;
+
+const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor"];
 function ImageCarousel(_ref) {
   let {
       title,
       images,
       height = 400,
-      fallback = "/assets/images/empty-box.svg"
+      fallback = "/assets/images/empty-box.svg",
+      activeDotColor = "#1890ff",
+      inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+      arrowIconColor = "#666",
+      arrowHoverIconColor = "#1890ff"
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
@@ -21433,16 +21334,30 @@ function ImageCarousel(_ref) {
   const handleCarouselChange = index => {
     setCurrent(index);
   };
+  const goToPrevious = () => {
+    var _carouselRef$current;
+    (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.prev();
+  };
+  const goToNext = () => {
+    var _carouselRef$current2;
+    (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.next();
+  };
+
+  // Check if images array is empty or invalid
+  const hasImages = images && images.length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
-      title: title
-    }, rest), {}, {
-      dots: false,
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
+      activeDotColor: activeDotColor,
+      inactiveDotColor: inactiveDotColor,
+      children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
+        title: title
+      }, rest), {}, {
+        arrows: false,
         ref: carouselRef,
         afterChange: handleCarouselChange,
-        infinite: true,
-        children: images.map((image, index) => {
+        infinite: hasImages,
+        dots: hasImages,
+        children: hasImages ? images.map((image, index) => {
           const imageSrc = typeof image === "string" ? image : image.src;
           const imageAlt = typeof image === "string" ? "".concat(title, " - Image ").concat(index + 1) : image.alt;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -21462,9 +21377,37 @@ function ImageCarousel(_ref) {
               }
             })
           }, imageSrc);
+        }) :
+        /*#__PURE__*/
+        // No images - show placeholder
+        jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
+            src: "/assets/images/no-image.svg",
+            alt: "No images available",
+            height: height,
+            width: "100%",
+            fallback: fallback,
+            preview: false,
+            style: {
+              objectFit: "contain"
+            }
+          })
         })
-      })
-    })), /*#__PURE__*/jsxRuntime.jsx("div", {
+      })), hasImages && images.length > 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.LeftOutlined, {}),
+          onClick: goToPrevious,
+          isLeft: true,
+          iconColor: arrowIconColor,
+          hoverIconColor: arrowHoverIconColor
+        }), /*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {}),
+          onClick: goToNext,
+          iconColor: arrowIconColor,
+          hoverIconColor: arrowHoverIconColor
+        })]
+      })]
+    }), hasImages && /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         display: "none"
       },
@@ -21474,9 +21417,9 @@ function ImageCarousel(_ref) {
           current,
           onVisibleChange: vis => setPreviewVisible(vis),
           onChange: idx => {
-            var _carouselRef$current;
+            var _carouselRef$current3;
             setCurrent(idx);
-            (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.goTo(idx);
+            (_carouselRef$current3 = carouselRef.current) === null || _carouselRef$current3 === void 0 || _carouselRef$current3.goTo(idx);
           }
         },
         children: images.map((image, index) => {

package/package.json

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

package/public/assets/images/no-image.svg

@@ -0,0 +1,18 @@
+<svg width="321" height="190" viewBox="0 0 321 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4160_16949)">
+<g clip-path="url(#clip1_4160_16949)">
+<path d="M94.375 99.5C78.3569 103.095 68.5 107.992 68.5 113.388C68.5 124.421 109.69 133.364 160.5 133.364C211.31 133.364 252.5 124.421 252.5 113.388C252.5 107.992 242.643 103.095 226.625 99.5V108.208C226.625 114.266 222.83 119.232 218.144 119.232H102.856C98.17 119.232 94.375 114.263 94.375 108.208V99.5Z" fill="#F3F4F6"/>
+<path d="M188.137 64.8152C188.137 60.2351 190.995 56.454 194.54 56.4512H226.625V108.208C226.625 114.266 222.83 119.232 218.144 119.232H102.856C98.17 119.232 94.375 114.263 94.375 108.208V56.4512H126.46C130.005 56.4512 132.863 60.2266 132.863 64.8067V64.8695C132.863 69.4496 135.752 73.1479 139.294 73.1479H181.706C185.248 73.1479 188.137 69.4153 188.137 64.8352V64.8152Z" fill="#E5E7EB" stroke="#E5E7EB"/>
+<path d="M226.625 56.7663L197.455 23.9435C196.055 21.7063 194.011 20.3536 191.858 20.3536H129.142C126.989 20.3536 124.945 21.7063 123.545 23.9407L94.375 56.7692" stroke="#E5E7EB"/>
+</g>
+<path d="M133.177 162.5H131.687V152.636H133.074L138.188 159.909H138.242V152.636H139.732V162.5H138.352L133.238 155.233H133.177V162.5ZM144.586 162.589C142.439 162.589 141.072 161.126 141.072 158.788C141.072 156.457 142.446 154.98 144.586 154.98C146.726 154.98 148.093 156.45 148.093 158.788C148.093 161.126 146.732 162.589 144.586 162.589ZM144.586 161.358C145.844 161.358 146.589 160.408 146.589 158.788C146.589 157.168 145.844 156.211 144.586 156.211C143.328 156.211 142.576 157.175 142.576 158.788C142.576 160.408 143.328 161.358 144.586 161.358ZM154.19 162.5H152.659V152.636H154.19V162.5ZM155.858 162.5V155.076H157.273V156.334H157.301C157.643 155.5 158.442 154.994 159.413 154.994C160.445 154.994 161.19 155.514 161.491 156.437H161.525C161.915 155.541 162.79 154.994 163.85 154.994C165.312 154.994 166.27 155.958 166.27 157.441V162.5H164.793V157.797C164.793 156.826 164.267 156.266 163.344 156.266C162.435 156.266 161.792 156.942 161.792 157.893V162.5H160.336V157.674C160.336 156.812 159.782 156.266 158.914 156.266C157.998 156.266 157.342 156.977 157.342 157.947V162.5H155.858ZM170.33 161.393C171.431 161.393 172.265 160.688 172.265 159.711V159.13L170.46 159.253C169.448 159.314 168.922 159.69 168.922 160.347C168.922 160.982 169.476 161.393 170.33 161.393ZM169.934 162.575C168.45 162.575 167.425 161.7 167.425 160.374C167.425 159.075 168.43 158.323 170.262 158.207L172.265 158.091V157.517C172.265 156.669 171.697 156.204 170.706 156.204C169.899 156.204 169.312 156.621 169.182 157.264H167.794C167.835 155.951 169.079 154.98 170.747 154.98C172.559 154.98 173.728 155.938 173.728 157.407V162.5H172.312V161.263H172.278C171.868 162.069 170.945 162.575 169.934 162.575ZM178.369 161.249C179.572 161.249 180.372 160.265 180.372 158.768C180.372 157.264 179.572 156.259 178.369 156.259C177.173 156.259 176.4 157.243 176.4 158.768C176.4 160.285 177.173 161.249 178.369 161.249ZM178.376 165.173C176.592 165.173 175.32 164.346 175.177 163.074H176.674C176.838 163.648 177.528 164.011 178.438 164.011C179.613 164.011 180.372 163.396 180.372 162.425V161.201H180.338C179.907 162.001 179.032 162.479 177.979 162.479C176.127 162.479 174.883 161.023 174.883 158.761C174.883 156.471 176.113 155.001 178.014 155.001C179.066 155.001 179.928 155.486 180.386 156.307H180.413V155.076H181.849V162.309C181.849 164.079 180.516 165.173 178.376 165.173ZM186.456 156.19C185.39 156.19 184.617 156.97 184.535 158.111H188.302C188.268 156.956 187.536 156.19 186.456 156.19ZM188.295 160.326H189.71C189.498 161.659 188.192 162.589 186.524 162.589C184.371 162.589 183.031 161.14 183.031 158.815C183.031 156.491 184.385 154.98 186.463 154.98C188.5 154.98 189.785 156.396 189.785 158.645V159.164H184.528V159.253C184.528 160.538 185.335 161.386 186.552 161.386C187.413 161.386 188.09 160.976 188.295 160.326Z" fill="#9DA4AE"/>
+</g>
+<defs>
+<clipPath id="clip0_4160_16949">
+<rect x="0.5" y="0.5" width="320" height="189" rx="6" fill="white"/>
+</clipPath>
+<clipPath id="clip1_4160_16949">
+<rect width="184" height="117" fill="white" transform="translate(68.5 16.5)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Widget from '../index.jsx'
 import { Carousel } from 'antd';
 
@@ -46,7 +46,7 @@ import { Carousel } from 'antd';
  * 
  * @returns {JSX.Element} The rendered CarouselWidget component
  */
-function CarouselWidget({title, children, ...rest}) {
+const CarouselWidget = forwardRef(({title, children, ...rest}, ref) => {
 
   /**
    * Handles carousel slide change events
@@ -59,11 +59,13 @@ function CarouselWidget({title, children, ...rest}) {
       title={title}
       className="with-border-header h-w-btn-header"
     >
-      <Carousel {...rest}>
+      <Carousel ref={ref} {...rest}>
         {children}
       </Carousel>
     </Widget>
   )
-}
+})
+
+CarouselWidget.displayName = 'CarouselWidget';
 
 export default CarouselWidget;

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

@@ -17,7 +17,23 @@ export default {
   argTypes: {
     height: {
       control: { type: 'range', min: 200, max: 600, step: 50 },
-      description: 'Height of the carousel images'
+      description: 'Height of the carousel images',
+    },
+    activeDotColor: {
+      control: { type: 'color' },
+      description: 'Color of the active dot in the carousel',
+    },
+    inactiveDotColor: {
+      control: { type: 'color' },
+      description: 'Color of inactive dots in the carousel',
+    },
+    arrowIconColor: {
+      control: { type: 'color' },
+      description: 'Default color of arrow icons',
+    },
+    arrowHoverIconColor: {
+      control: { type: 'color' },
+      description: 'Color of arrow icons on hover',
     },
   },
 };
@@ -78,6 +94,7 @@ export const Primary = {
   args: {
     title: "Nature Gallery",
     height: 400,
+    arrows: true
   },
 };
 
@@ -90,4 +107,69 @@ export const WithFallbacks = {
       height={350}
     />
   ),
+};
+
+export const EmptyState = {
+  name: "Empty State (No Images)",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>📷 Empty State:</strong> Shows placeholder when no images are provided. Notice how arrows, dots, and preview functionality are automatically disabled.
+      </p>
+      <ImageCarousel 
+        title="Empty Gallery" 
+        images={[]}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    activeDotColor: "#1890ff",
+    inactiveDotColor: "rgba(255, 255, 255, 0.3)"
+  },
+};
+
+export const CustomDotColors = {
+  name: "Custom Dot Colors",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>🎨 Custom Styling:</strong> Demonstrating custom dot colors with activeDotColor and inactiveDotColor props.
+      </p>
+      <ImageCarousel 
+        title="Colorful Gallery" 
+        images={sampleImages}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    activeDotColor: "#ff4757",
+    inactiveDotColor: "rgba(255, 71, 87, 0.2)"
+  },
+};
+
+export const CustomArrowColors = {
+  name: "Custom Arrow Colors",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>🎯 Arrow Styling:</strong> Demonstrating custom arrow icon colors with hover effects.
+      </p>
+      <ImageCarousel 
+        title="Interactive Arrows" 
+        images={sampleImages}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    arrowIconColor: "#333",        // Dark gray normally
+    arrowHoverIconColor: "#ff6b6b", // Red on hover
+    activeDotColor: "#ff6b6b",
+    inactiveDotColor: "rgba(255, 107, 107, 0.2)"
+  },
 };

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/components/CustomArrowButton/index.js

@@ -0,0 +1,52 @@
+import { Button } from "antd";
+import { useState } from "react";
+
+function CustomArrowButton({
+  icon, 
+  onClick = () => {}, 
+  isLeft = false, 
+  iconColor = "#666", 
+  hoverIconColor = "#1890ff"
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? 
+    { ...icon, props: { ...icon.props, style: { color: isHovered ? hoverIconColor : iconColor } } } : 
+    icon;
+
+  return (
+    <Button
+        type="default"
+        shape="circle"
+        icon={styledIcon}
+        onClick={onClick}
+        style={{
+            position: "absolute",
+            right: !isLeft ? "40px" : "auto",
+            left: !isLeft ? "auto" : "40px",
+            top: "58%",
+            transform: "translateY(-50%)",
+            zIndex: 10,
+            backgroundColor: "rgba(255, 255, 255, 0.4)",
+            border: "1px solid rgba(0, 0, 0, 0.1)",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+            width: "40px",
+            height: "40px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}
+        onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+            setIsHovered(true);
+        }}
+        onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
+            setIsHovered(false);
+        }}
+    />
+  )
+}
+
+export default CustomArrowButton

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

@@ -1,6 +1,10 @@
 import React, { useState, useRef } from "react";
+import styled from "styled-components";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel } from "antd";
+import { Image, Carousel, Button } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import CustomArrowButton from "./components/CustomArrowButton/index.js";
+import { StyledCarouselWrapper } from "./style.js";
 
 /**
  * @typedef {Object} ImageObject
@@ -36,6 +40,10 @@ import { Image, Carousel } from "antd";
  * @param {(string|ImageObject)[]} props.images - Array of image URLs (strings) or image objects with src and alt properties
  * @param {number} [props.height=400] - Height of the carousel images in pixels
  * @param {string} [props.fallback="/assets/images/empty-box.svg"] - Fallback image URL when original image fails to load
+ * @param {string} [props.activeDotColor="#1890ff"] - Color of the active dot
+ * @param {string} [props.inactiveDotColor="rgba(255, 255, 255, 0.3)"] - Color of inactive dots
+ * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
+ * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -46,6 +54,8 @@ import { Image, Carousel } from "antd";
  * - ✅ Support for both string URLs and image objects with alt text
  * - ✅ Synchronized carousel and preview navigation
  * - ✅ Infinite scrolling in both carousel and preview modes
+ * - ✅ Placeholder image for empty image arrays (/assets/images/no-image.svg)
+ * - ✅ Customizable dot colors via props
  * 
  * @accessibility
  * - Proper alt text support for screen readers
@@ -58,6 +68,10 @@ function ImageCarousel({
   images,
   height = 400,
   fallback = "/assets/images/empty-box.svg",
+  activeDotColor = "#1890ff",
+  inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+  arrowIconColor = "#666",
+  arrowHoverIconColor = "#1890ff",
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -68,11 +82,33 @@ function ImageCarousel({
     setCurrent(index);
   };
 
+  const goToPrevious = () => {
+    carouselRef.current?.prev();
+  };
+
+  const goToNext = () => {
+    carouselRef.current?.next();
+  };
+
+  // Check if images array is empty or invalid
+  const hasImages = images && images.length > 0;
+
   return (
     <>
-      <CarouselWidget title={title} {...rest} dots={false}>
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} infinite>
-          {images.map((image, index) => {
+      <StyledCarouselWrapper 
+        activeDotColor={activeDotColor}
+        inactiveDotColor={inactiveDotColor}
+      >
+        <CarouselWidget 
+          title={title} 
+          {...rest} 
+          arrows={false}
+          ref={carouselRef}
+          afterChange={handleCarouselChange}
+          infinite={hasImages}
+          dots={hasImages}
+        >
+          {hasImages ? images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -98,23 +134,58 @@ function ImageCarousel({
                 />
               </div>
             );
-          })}
-        </Carousel>
-      </CarouselWidget>
+          }) : (
+            // No images - show placeholder
+            <div>
+              <Image
+                src="/assets/images/no-image.svg"
+                alt="No images available"
+                height={height}
+                width="100%"
+                fallback={fallback}
+                preview={false}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+            </div>
+          )}
+        </CarouselWidget>
+        
+        {hasImages && images.length > 1 && (
+          <>
+            <CustomArrowButton
+              icon={<LeftOutlined />}
+              onClick={goToPrevious}
+              isLeft={true}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+            <CustomArrowButton
+              icon={<RightOutlined />}
+              onClick={goToNext}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+          </>
+        )}
+      </StyledCarouselWrapper>
 
-      <div style={{ display: "none" }}>
-        <Image.PreviewGroup
-          preview={{
-            visible: previewVisible,
-            current,
-            onVisibleChange: (vis) => setPreviewVisible(vis),
-            onChange: (idx) => {
-              setCurrent(idx);
-              carouselRef.current?.goTo(idx);
-            },
-          }}
-        >
-          {images.map((image, index) => {
+      {/* Preview functionality - only show if there are images */}
+      {hasImages && (
+        <div style={{ display: "none" }}>
+          <Image.PreviewGroup
+            preview={{
+              visible: previewVisible,
+              current,
+              onVisibleChange: (vis) => setPreviewVisible(vis),
+              onChange: (idx) => {
+                setCurrent(idx);
+                carouselRef.current?.goTo(idx);
+              },
+            }}
+          >
+            {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -122,9 +193,10 @@ function ImageCarousel({
                 : image.alt;
 
             return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-          })}
-        </Image.PreviewGroup>
-      </div>
+            })}
+          </Image.PreviewGroup>
+        </div>
+      )}
     </>
   );
 }

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/style.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const StyledCarouselWrapper = styled.div`
+  position: relative;
+  
+  .ant-carousel .slick-dots li button {
+    background: ${props => props.inactiveDotColor} !important;
+    opacity: 1 !important;
+  }
+  
+  .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important;
+    opacity: 1 !important;
+  }
+`;

package/src/@daf/core/components/UI/SDGIcon/SGDIcon.stories.jsx

@@ -52,7 +52,25 @@ export const BiggerIcons = {
 export const ReverseDirection = {
 	name: "ReverseDirection",
 	args: {
-		sdgList: ["noPoverty", "zeroHunger", "goodHealthWellbeing", "qualityEducation"],
+		sdgList: [
+			"noPoverty",
+			"zeroHunger",
+			"goodHealthWellbeing",
+			"qualityEducation",
+			"genderEquality",
+			"cleanWaterSanitation",
+			"affordableCleanEnergy",
+			"decentWorkEconomicGrowth",
+			"industryInnovationInfrastructure",
+			"reducedInequalities",
+			"sustainableCitiesCommunities",
+			"responsibleConsumptionProduction",
+			"climateAction",
+			"lifeBelowWater",
+			"lifeOnLand",
+			"peaceJusticeStrongInstitutions",
+			"partnershipsForGoals",
+		],
 		reverseDirection: true,
 	},
 };

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"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/src/@daf/core/components/Dashboard/Widget/ScrollWidget/ScrollWidget.stories.jsx

@@ -1,39 +0,0 @@
-import ScrollWidget from "./index";
-import ThemeLayout from "../../../ThemeLayout";
-import DashboardLayout from "../../DashboardLayout";
-import ProjectWidget from "../ProjectWidget";
-
-export default {
-	title: "Dashboard/Widgets/ScrollWidget",
-	component: ScrollWidget,
-	tags: ["autodocs"],
-	decorators: [
-		(Story) => (
-			<div style={{ margin: "3em" }}>
-				<ThemeLayout>
-					<Story />
-				</ThemeLayout>
-			</div>
-		),
-	],
-};
-
-export const Primary = {
-	name: "Scroll Widget",
-	args: {
-		title: "Scroll Widget Title",
-	},
-	render: (args) => (
-		<DashboardLayout>
-			<ScrollWidget {...args}>
-				<section className="nowrap">
-					<ProjectWidget hideSDGList />
-					<ProjectWidget hideSDGList />
-					<ProjectWidget hideSDGList />
-					<ProjectWidget hideSDGList />
-					<ProjectWidget hideSDGList />
-				</section>
-			</ScrollWidget>
-		</DashboardLayout>
-	),
-};

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

@@ -1,22 +0,0 @@
-import Widget from "../index.jsx";
-
-export default function ScrollWidget({ classname, widgetClassname, children, ...props }) {
-	return (
-		<Widget className={widgetClassname} {...props}>
-			<div
-				style={{
-					overflowX: "auto",
-					overflowY: "hidden",
-					width: "100%",
-					display: "flex",
-					gap: "10px",
-					alignItems: "stretch",
-					scrollbarWidth: "thin",
-					scrollbarColor: "#ccc transparent",
-				}}
-			>
-				{children}
-			</div>
-		</Widget>
-	);
-}