@adiba-banking-cloud/backoffice 0.0.96 → 0.0.98

package/build/index.cjs.js/index.js

@@ -11225,7 +11225,8 @@ const initChart$2 = props => {
       type: "column",
       borderRadius: 8,
       backgroundColor: props?.bgColor || "rgba(255, 255, 255, 0)",
-      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)"
+      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)",
+      inverted: props?.inverted || false
     },
     tooltip: {
       backgroundColor: "#0F193D",
@@ -11376,7 +11377,8 @@ const EqualizerColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11390,7 +11392,8 @@ const SimpleColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11518,7 +11521,16 @@ const initSeries$2 = props => {
   };
 };
 
+const isMultiAxis = props => {
+  return "yAxisConfig" in props;
+};
+const isStacked = props => {
+  // StackedAreaChartProps doesn't have yAxisConfig, but has multiple series
+  return !("yAxisConfig" in props) && props.series.length > 1;
+};
 const initChart$1 = props => {
+  const isMulti = isMultiAxis(props);
+  const isStackedChart = isStacked(props);
   return {
     chart: {
       type: "areaspline",
@@ -11533,7 +11545,45 @@ const initChart$1 = props => {
       style: {
         color: "white"
       },
-      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+      formatter: function () {
+        const point = this.point;
+        const series = this.series;
+        const key = this.key || this.x;
+        if (isStackedChart) {
+          const stackedProps = props;
+          const aggregator = stackedProps.aggregator || "sum";
+          const stackTotal = point.stackTotal || point.y;
+          if (aggregator === "average") {
+            const seriesCount = props.series.length;
+            const average = (stackTotal / seriesCount).toFixed(2);
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${stackTotal}</b>`;
+          }
+        }
+        if (isMulti) {
+          const multiProps = props;
+          const aggregator = multiProps.aggregator || "sum";
+          const chart = this.series.chart;
+          const allSeries = chart.series;
+          const pointIndex = series.data.indexOf(point);
+          let sum = 0;
+          let count = 0;
+          allSeries.forEach(s => {
+            if (s.data && s.data[pointIndex] && s.data[pointIndex].y !== null && s.data[pointIndex].y !== undefined) {
+              sum += s.data[pointIndex].y;
+              count++;
+            }
+          });
+          if (aggregator === "average") {
+            const average = count > 0 ? (sum / count).toFixed(2) : "0.00";
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${sum}</b>`;
+          }
+        }
+        return `<b>${key}</b><br/>${series.name}: ${point.y}<br/>`;
+      }
     },
     credits: {
       enabled: false
@@ -11551,8 +11601,8 @@ const initChart$1 = props => {
     },
     legend: {
       enabled: props.withLegend,
-      align: "right",
-      verticalAlign: "top"
+      align: props.legendPosition?.align || "right",
+      verticalAlign: props.legendPosition?.verticalAlign || "top"
     }
   };
 };
@@ -11589,7 +11639,9 @@ const SimpleArea = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    legendPosition: props.legendPosition,
+    showYAxis: props.showYAxis
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
@@ -11626,12 +11678,27 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return {
+    const yAxis = {
       ...defaults,
       ...{
         labels
       }
     };
+
+    // Hide yAxis if showYAxis is false
+    if (props.showYAxis === false) {
+      return {
+        ...yAxis,
+        visible: false,
+        labels: {
+          enabled: false
+        },
+        title: {
+          text: null
+        }
+      };
+    }
+    return yAxis;
   };
   const renderPlot = () => {
     const areaspline = {
@@ -11817,7 +11884,7 @@ var img$b = "data:image/svg+xml,%3csvg width='893' height='221' viewBox='0 0 893
 
 const Logo = _ref => {
   let {
-    href = '/',
+    href = "/",
     fallbackSrc,
     src,
     fit,
@@ -12009,11 +12076,11 @@ const UserMenuTarget = _ref => {
     gap: "sm"
   }, /*#__PURE__*/React.createElement(core.Avatar, {
     src: avatar,
-    radius: 'md',
+    radius: "md",
     key: name,
     name: name,
     color: "initials",
-    bd: '0.5px solid adiba.2'
+    bd: "0.5px solid adiba.2"
   }), /*#__PURE__*/React.createElement(core.Stack, {
     gap: 0,
     align: "flex-start",
@@ -12065,7 +12132,7 @@ const UserMenuDropdown = _ref => {
     if (section?.title) items.push(/*#__PURE__*/React.createElement(core.Menu.Label, {
       fz: 10,
       fw: 500,
-      c: 'dimmed',
+      c: "dimmed",
       key: `label-${index}`
     }, section.title));
     items.push(...sectionItems);
@@ -12222,7 +12289,7 @@ const SearchPanel = _ref3 => {
       searchFn ? searchFn(values) : void 0;
     })
   }, /*#__PURE__*/React.createElement(core.Group, {
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(core.TextInput, {
     fw: 300,
     name: "search",
@@ -12232,7 +12299,7 @@ const SearchPanel = _ref3 => {
     value: search,
     placeholder: placeholder,
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon),
-    rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React.createElement(core.ActionIcon, {
+    rightSection: typeof filterFn == "function" ? /*#__PURE__*/React.createElement(core.ActionIcon, {
       variant: "transparent",
       onClick: filterFn
     }, /*#__PURE__*/React.createElement(Icons, filterIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null),
@@ -12289,7 +12356,7 @@ const LabelPanel = _ref => {
     radius,
     p
   }), /*#__PURE__*/React.createElement(core.Stack, {
-    pb: 'md'
+    pb: "md"
   }, /*#__PURE__*/React.createElement(core.Group, {
     justify: "space-between",
     p: 0
@@ -12340,15 +12407,15 @@ const AvatarLabelPanel = _ref2 => {
     py: "sm"
   }, /*#__PURE__*/React.createElement(core.Box, {
     w: labelWidth,
-    pl: 'md'
+    pl: "md"
   }, /*#__PURE__*/React.createElement(core.Avatar, {
     size: avatarSize,
     src: avatar,
-    radius: 'md',
+    radius: "md",
     key: name,
     name: name,
     color: "initials",
-    bd: '0.5px solid adiba.2'
+    bd: "0.5px solid adiba.2"
   })), /*#__PURE__*/React.createElement(core.Stack, {
     py: 10,
     gap: "md",
@@ -12386,7 +12453,7 @@ const SimpleText = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(core.Text, _extends({
     fw: 300,
-    fz: smaller ? '90%' : undefined
+    fz: smaller ? "90%" : undefined
   }, rest), label);
 };
 
@@ -12421,8 +12488,10 @@ const PageTitle = _ref => {
     rightsection = /*#__PURE__*/React.createElement(core.SegmentedControl, {
       size: "sm",
       bg: "white",
-      color: 'adiba',
-      data: switcher.items
+      color: "adiba",
+      data: switcher.items,
+      value: switcher.value,
+      onChange: switcher.onChange
     });
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(core.Group, {
@@ -12465,7 +12534,7 @@ const TitleWithIndex = _ref => {
     errorFn = () => void 0
   } = _ref;
   return /*#__PURE__*/React.createElement(core.Group, null, /*#__PURE__*/React.createElement(core.Group, {
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(core.Title, {
     order: 3,
     fw: 500
@@ -12534,7 +12603,7 @@ const ConnectionPanelDetail = _ref => {
     fz: "xs"
   }, label), /*#__PURE__*/React.createElement(core.Text, {
     fw: 300,
-    fz: 'sm',
+    fz: "sm",
     c: altColor
   }, value));
 };
@@ -12660,9 +12729,9 @@ const ApplicationPanelFeatures = _ref => {
     stroke: 1.5
   })), /*#__PURE__*/React.createElement(core.Text, {
     fw: 300,
-    c: 'altiba',
-    size: '12px',
-    w: '90%',
+    c: "altiba",
+    size: "12px",
+    w: "90%",
     truncate: true
   }, label));
 };
@@ -12710,7 +12779,8 @@ const ApplicationPanel = _ref => {
     variant: "outline"
   }, discount)), /*#__PURE__*/React.createElement(core.Text, {
     fw: 300,
-    fz: "sm"
+    fz: "sm",
+    lineClamp: 3
   }, summary))), /*#__PURE__*/React.createElement(core.Card.Section, {
     p: "md",
     pt: 0
@@ -12778,8 +12848,8 @@ const SubscriptionPlans = _ref => {
     altColor = "altiba.3",
     durationDays,
     planPrice,
-    buttonLabel = 'Pay Early',
-    altButtonLabel = 'Pay Now',
+    buttonLabel = "Pay Early",
+    altButtonLabel = "Pay Now",
     onClick
   } = _ref;
   const price = planPrice.split("/");
@@ -12954,7 +13024,7 @@ const SimpleBody = _ref => {
     const columnIndex = column.id;
     return /*#__PURE__*/React.createElement(core.Table.Td, {
       key: idx
-    }, typeof row[columnIndex] === 'function' ? row[columnIndex](`${index}`) : row[columnIndex] || "");
+    }, typeof row[columnIndex] === "function" ? row[columnIndex](`${index}`) : row[columnIndex] || "");
   }));
 };
 
@@ -12987,7 +13057,7 @@ const SimpleTable = _ref => {
     verticalSpacing: "md"
   };
   return /*#__PURE__*/React.createElement(core.Table, isStriped && isStripedProps, /*#__PURE__*/React.createElement(core.Table.Thead, null, /*#__PURE__*/React.createElement(core.Table.Tr, {
-    bg: isStriped ? 'gray.1' : 'transparent'
+    bg: isStriped ? "gray.1" : "transparent"
   }, columns.map((column, index) => {
     return /*#__PURE__*/React.createElement(SimpleHeader, _extends({
       key: `column-${index}`
@@ -13047,7 +13117,7 @@ const File = _ref => {
     p: isChip ? "xs" : undefined
   }, /*#__PURE__*/React.createElement(core.Group, {
     justify: isChip ? "space-between" : undefined,
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(core.Image, {
     p: isChip ? undefined : "xs",
     pr: 2,
@@ -13147,7 +13217,7 @@ const SimpleModal = _ref => {
   }, /*#__PURE__*/React.createElement(core.Title, {
     order: 3,
     fw: 500,
-    lh: '40px'
+    lh: "40px"
   }, innerProps.title), /*#__PURE__*/React.createElement(React.Fragment, null, innerProps.modalBody)));
 };
 
@@ -13235,7 +13305,7 @@ const Drawer = _ref => {
       transition: "slide-left"
     }
   }, /*#__PURE__*/React.createElement(core.Drawer.Overlay, null), /*#__PURE__*/React.createElement(core.Drawer.Content, null, /*#__PURE__*/React.createElement(core.Drawer.Header, null, /*#__PURE__*/React.createElement(core.Drawer.Title, {
-    fz: 'lg',
+    fz: "lg",
     fw: "400"
   }, title), /*#__PURE__*/React.createElement(core.Drawer.CloseButton, {
     icon: /*#__PURE__*/React.createElement(Icons, {

package/build/index.esm.js/index.js

@@ -11204,7 +11204,8 @@ const initChart$2 = props => {
       type: "column",
       borderRadius: 8,
       backgroundColor: props?.bgColor || "rgba(255, 255, 255, 0)",
-      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)"
+      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)",
+      inverted: props?.inverted || false
     },
     tooltip: {
       backgroundColor: "#0F193D",
@@ -11355,7 +11356,8 @@ const EqualizerColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11369,7 +11371,8 @@ const SimpleColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11497,7 +11500,16 @@ const initSeries$2 = props => {
   };
 };
 
+const isMultiAxis = props => {
+  return "yAxisConfig" in props;
+};
+const isStacked = props => {
+  // StackedAreaChartProps doesn't have yAxisConfig, but has multiple series
+  return !("yAxisConfig" in props) && props.series.length > 1;
+};
 const initChart$1 = props => {
+  const isMulti = isMultiAxis(props);
+  const isStackedChart = isStacked(props);
   return {
     chart: {
       type: "areaspline",
@@ -11512,7 +11524,45 @@ const initChart$1 = props => {
       style: {
         color: "white"
       },
-      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+      formatter: function () {
+        const point = this.point;
+        const series = this.series;
+        const key = this.key || this.x;
+        if (isStackedChart) {
+          const stackedProps = props;
+          const aggregator = stackedProps.aggregator || "sum";
+          const stackTotal = point.stackTotal || point.y;
+          if (aggregator === "average") {
+            const seriesCount = props.series.length;
+            const average = (stackTotal / seriesCount).toFixed(2);
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${stackTotal}</b>`;
+          }
+        }
+        if (isMulti) {
+          const multiProps = props;
+          const aggregator = multiProps.aggregator || "sum";
+          const chart = this.series.chart;
+          const allSeries = chart.series;
+          const pointIndex = series.data.indexOf(point);
+          let sum = 0;
+          let count = 0;
+          allSeries.forEach(s => {
+            if (s.data && s.data[pointIndex] && s.data[pointIndex].y !== null && s.data[pointIndex].y !== undefined) {
+              sum += s.data[pointIndex].y;
+              count++;
+            }
+          });
+          if (aggregator === "average") {
+            const average = count > 0 ? (sum / count).toFixed(2) : "0.00";
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${sum}</b>`;
+          }
+        }
+        return `<b>${key}</b><br/>${series.name}: ${point.y}<br/>`;
+      }
     },
     credits: {
       enabled: false
@@ -11530,8 +11580,8 @@ const initChart$1 = props => {
     },
     legend: {
       enabled: props.withLegend,
-      align: "right",
-      verticalAlign: "top"
+      align: props.legendPosition?.align || "right",
+      verticalAlign: props.legendPosition?.verticalAlign || "top"
     }
   };
 };
@@ -11568,7 +11618,9 @@ const SimpleArea = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    legendPosition: props.legendPosition,
+    showYAxis: props.showYAxis
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
@@ -11605,12 +11657,27 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return {
+    const yAxis = {
       ...defaults,
       ...{
         labels
       }
     };
+
+    // Hide yAxis if showYAxis is false
+    if (props.showYAxis === false) {
+      return {
+        ...yAxis,
+        visible: false,
+        labels: {
+          enabled: false
+        },
+        title: {
+          text: null
+        }
+      };
+    }
+    return yAxis;
   };
   const renderPlot = () => {
     const areaspline = {
@@ -11796,7 +11863,7 @@ var img$b = "data:image/svg+xml,%3csvg width='893' height='221' viewBox='0 0 893
 
 const Logo = _ref => {
   let {
-    href = '/',
+    href = "/",
     fallbackSrc,
     src,
     fit,
@@ -11988,11 +12055,11 @@ const UserMenuTarget = _ref => {
     gap: "sm"
   }, /*#__PURE__*/React.createElement(Avatar, {
     src: avatar,
-    radius: 'md',
+    radius: "md",
     key: name,
     name: name,
     color: "initials",
-    bd: '0.5px solid adiba.2'
+    bd: "0.5px solid adiba.2"
   }), /*#__PURE__*/React.createElement(Stack, {
     gap: 0,
     align: "flex-start",
@@ -12044,7 +12111,7 @@ const UserMenuDropdown = _ref => {
     if (section?.title) items.push(/*#__PURE__*/React.createElement(Menu.Label, {
       fz: 10,
       fw: 500,
-      c: 'dimmed',
+      c: "dimmed",
       key: `label-${index}`
     }, section.title));
     items.push(...sectionItems);
@@ -12201,7 +12268,7 @@ const SearchPanel = _ref3 => {
       searchFn ? searchFn(values) : void 0;
     })
   }, /*#__PURE__*/React.createElement(Group, {
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(TextInput, {
     fw: 300,
     name: "search",
@@ -12211,7 +12278,7 @@ const SearchPanel = _ref3 => {
     value: search,
     placeholder: placeholder,
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon),
-    rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React.createElement(ActionIcon, {
+    rightSection: typeof filterFn == "function" ? /*#__PURE__*/React.createElement(ActionIcon, {
       variant: "transparent",
       onClick: filterFn
     }, /*#__PURE__*/React.createElement(Icons, filterIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null),
@@ -12268,7 +12335,7 @@ const LabelPanel = _ref => {
     radius,
     p
   }), /*#__PURE__*/React.createElement(Stack, {
-    pb: 'md'
+    pb: "md"
   }, /*#__PURE__*/React.createElement(Group, {
     justify: "space-between",
     p: 0
@@ -12319,15 +12386,15 @@ const AvatarLabelPanel = _ref2 => {
     py: "sm"
   }, /*#__PURE__*/React.createElement(Box, {
     w: labelWidth,
-    pl: 'md'
+    pl: "md"
   }, /*#__PURE__*/React.createElement(Avatar, {
     size: avatarSize,
     src: avatar,
-    radius: 'md',
+    radius: "md",
     key: name,
     name: name,
     color: "initials",
-    bd: '0.5px solid adiba.2'
+    bd: "0.5px solid adiba.2"
   })), /*#__PURE__*/React.createElement(Stack, {
     py: 10,
     gap: "md",
@@ -12365,7 +12432,7 @@ const SimpleText = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(Text, _extends({
     fw: 300,
-    fz: smaller ? '90%' : undefined
+    fz: smaller ? "90%" : undefined
   }, rest), label);
 };
 
@@ -12400,8 +12467,10 @@ const PageTitle = _ref => {
     rightsection = /*#__PURE__*/React.createElement(SegmentedControl, {
       size: "sm",
       bg: "white",
-      color: 'adiba',
-      data: switcher.items
+      color: "adiba",
+      data: switcher.items,
+      value: switcher.value,
+      onChange: switcher.onChange
     });
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Group, {
@@ -12444,7 +12513,7 @@ const TitleWithIndex = _ref => {
     errorFn = () => void 0
   } = _ref;
   return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Group, {
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(Title, {
     order: 3,
     fw: 500
@@ -12513,7 +12582,7 @@ const ConnectionPanelDetail = _ref => {
     fz: "xs"
   }, label), /*#__PURE__*/React.createElement(Text, {
     fw: 300,
-    fz: 'sm',
+    fz: "sm",
     c: altColor
   }, value));
 };
@@ -12639,9 +12708,9 @@ const ApplicationPanelFeatures = _ref => {
     stroke: 1.5
   })), /*#__PURE__*/React.createElement(Text, {
     fw: 300,
-    c: 'altiba',
-    size: '12px',
-    w: '90%',
+    c: "altiba",
+    size: "12px",
+    w: "90%",
     truncate: true
   }, label));
 };
@@ -12689,7 +12758,8 @@ const ApplicationPanel = _ref => {
     variant: "outline"
   }, discount)), /*#__PURE__*/React.createElement(Text, {
     fw: 300,
-    fz: "sm"
+    fz: "sm",
+    lineClamp: 3
   }, summary))), /*#__PURE__*/React.createElement(Card.Section, {
     p: "md",
     pt: 0
@@ -12757,8 +12827,8 @@ const SubscriptionPlans = _ref => {
     altColor = "altiba.3",
     durationDays,
     planPrice,
-    buttonLabel = 'Pay Early',
-    altButtonLabel = 'Pay Now',
+    buttonLabel = "Pay Early",
+    altButtonLabel = "Pay Now",
     onClick
   } = _ref;
   const price = planPrice.split("/");
@@ -12933,7 +13003,7 @@ const SimpleBody = _ref => {
     const columnIndex = column.id;
     return /*#__PURE__*/React.createElement(Table.Td, {
       key: idx
-    }, typeof row[columnIndex] === 'function' ? row[columnIndex](`${index}`) : row[columnIndex] || "");
+    }, typeof row[columnIndex] === "function" ? row[columnIndex](`${index}`) : row[columnIndex] || "");
   }));
 };
 
@@ -12966,7 +13036,7 @@ const SimpleTable = _ref => {
     verticalSpacing: "md"
   };
   return /*#__PURE__*/React.createElement(Table, isStriped && isStripedProps, /*#__PURE__*/React.createElement(Table.Thead, null, /*#__PURE__*/React.createElement(Table.Tr, {
-    bg: isStriped ? 'gray.1' : 'transparent'
+    bg: isStriped ? "gray.1" : "transparent"
   }, columns.map((column, index) => {
     return /*#__PURE__*/React.createElement(SimpleHeader, _extends({
       key: `column-${index}`
@@ -13026,7 +13096,7 @@ const File = _ref => {
     p: isChip ? "xs" : undefined
   }, /*#__PURE__*/React.createElement(Group, {
     justify: isChip ? "space-between" : undefined,
-    gap: 'xs'
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(Image, {
     p: isChip ? undefined : "xs",
     pr: 2,
@@ -13126,7 +13196,7 @@ const SimpleModal = _ref => {
   }, /*#__PURE__*/React.createElement(Title, {
     order: 3,
     fw: 500,
-    lh: '40px'
+    lh: "40px"
   }, innerProps.title), /*#__PURE__*/React.createElement(React.Fragment, null, innerProps.modalBody)));
 };
 
@@ -13214,7 +13284,7 @@ const Drawer = _ref => {
       transition: "slide-left"
     }
   }, /*#__PURE__*/React.createElement(Drawer$1.Overlay, null), /*#__PURE__*/React.createElement(Drawer$1.Content, null, /*#__PURE__*/React.createElement(Drawer$1.Header, null, /*#__PURE__*/React.createElement(Drawer$1.Title, {
-    fz: 'lg',
+    fz: "lg",
     fw: "400"
   }, title), /*#__PURE__*/React.createElement(Drawer$1.CloseButton, {
     icon: /*#__PURE__*/React.createElement(Icons, {

package/build/typings/components/charts/area/Area.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { SimpleAreaChartProps } from "./Area.types";
+import { SimpleAreaChartProps, MultiAxisAreaChartProps, StackedAreaChartProps } from "./Area.types";
 export declare const SimpleArea: React.FC<SimpleAreaChartProps>;
+export declare const MultiAxisArea: React.FC<MultiAxisAreaChartProps>;
+export declare const StackedArea: React.FC<StackedAreaChartProps>;

package/build/typings/components/charts/area/Area.default.d.ts

@@ -1,2 +1,2 @@
-import { AreaChartConfig, AreaChartProps } from './Area.types';
-export declare const initChart: (props: AreaChartProps) => AreaChartConfig;
+import { AreaChartConfig, AreaChartProps, MultiAxisAreaChartProps, StackedAreaChartProps } from "./Area.types";
+export declare const initChart: (props: AreaChartProps | MultiAxisAreaChartProps | StackedAreaChartProps) => AreaChartConfig;

package/build/typings/components/charts/area/Area.stories.d.ts

@@ -4,3 +4,5 @@ import { SimpleArea } from "./Area";
 declare const _default: Meta<typeof SimpleArea>;
 export default _default;
 export declare const SimpleAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").SimpleAreaChartProps>;
+export declare const MultiAxisAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").MultiAxisAreaChartProps>;
+export declare const StackedAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").StackedAreaChartProps>;

package/build/typings/components/charts/area/Area.types.d.ts

@@ -17,6 +17,11 @@ export interface AreaChartProps {
     series: number[][];
     withLegend: boolean;
     withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
 }
 export interface SimpleAreaChartProps {
     bgColor?: string;
@@ -28,6 +33,11 @@ export interface SimpleAreaChartProps {
     series: number[];
     withLegend: boolean;
     withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
 }
 export interface ChartSeriesArea {
     xAxis: {
@@ -46,7 +56,13 @@ export interface ChartSeriesArea {
         gridLineDashStyle?: string;
         gridLineWidth?: number;
         labels: object;
-    };
+    } | Array<{
+        allowDecimals: boolean;
+        title: object;
+        gridLineDashStyle?: string;
+        gridLineWidth?: number;
+        labels: object;
+    }>;
     series: AreaChartSeries[];
     plotOptions: object;
 }
@@ -56,4 +72,49 @@ export interface AreaChartSeries {
     color: string;
     enableMouseTracking?: boolean;
     showInLegend?: boolean;
+    yAxis?: number;
+}
+export interface MultiAxisAreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string[];
+    series: number[][];
+    withLegend: boolean;
+    withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean | boolean[];
+    aggregator?: "sum" | "average";
+    yAxisConfig?: Array<{
+        title?: string;
+        allowDecimals?: boolean;
+        gridLineDashStyle?: string;
+        gridLineWidth?: number;
+        labels?: {
+            color?: string;
+            formatter?: (ctx: any) => string;
+        };
+    }>;
+}
+export interface StackedAreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string[];
+    series: number[][];
+    withLegend: boolean;
+    withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
+    aggregator?: "sum" | "average";
 }

package/build/typings/components/charts/column/Column.default.d.ts

@@ -1,2 +1,2 @@
-import { ChartConfig, ChartProps } from './Column.types';
+import { ChartConfig, ChartProps } from "./Column.types";
 export declare const initChart: (props: ChartProps) => ChartConfig;

package/build/typings/components/charts/column/Column.types.d.ts

@@ -8,6 +8,7 @@ export interface ChartProps {
     series: number[][];
     withLegend: boolean;
     equalizer: boolean;
+    inverted?: boolean;
 }
 export interface SimpleChartProps {
     bgColor?: string;
@@ -18,6 +19,7 @@ export interface SimpleChartProps {
     yAxisLabel: string;
     series: number[];
     withLegend: boolean;
+    inverted?: boolean;
 }
 export interface ChartConfig {
     chart: object;

package/build/typings/components/general/icons/Icons.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { IconsProps } from "./Icons.types";
-import './Icons.css';
+import "./Icons.css";
 export declare const Icons: React.FC<IconsProps>;

package/build/typings/components/general/title/Title.types.d.ts

@@ -12,7 +12,7 @@ export interface PageTitleProps extends TitleProps {
 export interface SwitcherProps {
     items: string[];
     value?: string;
-    onChange?: () => void;
+    onChange?: (value: string) => void;
 }
 export interface BreadCrumbItemProps {
     name: string;

package/build/typings/components/menus/application/Application.stories.d.ts

@@ -1,6 +1,6 @@
 import { ApplicationMenu } from "./Application";
 import { Meta } from "@storybook/react";
-import '@mantine/core/styles.css';
+import "@mantine/core/styles.css";
 declare const _default: Meta<typeof ApplicationMenu>;
 export default _default;
 export declare const ApplicationMenuExample: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Application.types").ApplicationMenuProps>;

package/build/typings/components/menus/side/Side.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SideMenuProps } from "./Side.types";
-import './Side.css';
+import "./Side.css";
 export declare const SideMenu: React.FC<SideMenuProps>;

package/build/typings/components/menus/user/User.stories.d.ts

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import { UserMenu } from "./User";
-import '@mantine/core/styles.css';
+import "@mantine/core/styles.css";
 declare const _default: Meta<typeof UserMenu>;
 export default _default;
 export declare const UserMenuExample: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./User.types").UsermenuProps>;

package/build/typings/components/modals/confim/Confim.d.ts

@@ -1,2 +1,2 @@
 import { BackofficeConfirmModalProps } from "./Confim.types";
-export declare const ConfirmModal: ({ children, loading }: BackofficeConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmModal: ({ children, loading, }: BackofficeConfirmModalProps) => import("react/jsx-runtime").JSX.Element;

package/build/typings/components/modals/confim/Confim.stories.d.ts

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import { ConfirmModal } from "./Confim";
-import '@mantine/core/styles.css';
+import "@mantine/core/styles.css";
 declare const _default: Meta<typeof ConfirmModal>;
 export default _default;
 export declare const ConfirmModalExample: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Confim.types").BackofficeConfirmModalProps>;

package/build/typings/components/widgets/subscription_plan/SubscriptionPlan.types.d.ts

@@ -5,7 +5,7 @@ export interface SubscriptionPlanProps {
     altColor: MantineColor;
     durationDays: number;
     planPrice: string;
-    onClick: (event: any) => void;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     buttonLabel?: string;
     altButtonLabel?: string;
 }

package/build/typings/shared/types/ActionProps.types.d.ts

@@ -1,5 +1,5 @@
 import { AlertProps, DrawerProps, ModalProps, NotificationProps, ButtonProps } from "@mantine/core";
-import { PageTitleProps } from '../../components/general/title/Title.types';
+import { PageTitleProps } from "../../components/general/title/Title.types";
 export interface DrawerActionProps {
     title: string;
     page: React.ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",