sag_components 2.0.0-beta41 → 2.0.0-beta43

package/dist/index.d.ts

@@ -838,6 +838,7 @@ declare namespace TotalDoughnutChart {
         const className: PropTypes.Requireable<string>;
         const title: PropTypes.Requireable<string>;
         const value: PropTypes.Requireable<number>;
+        const rootFont: PropTypes.Requireable<string>;
         const addingBenchmark: PropTypes.Requireable<boolean>;
         const dotCut: PropTypes.Requireable<boolean>;
         const currencySign: PropTypes.Requireable<boolean>;
@@ -847,6 +848,7 @@ declare namespace TotalDoughnutChart {
             value: PropTypes.Requireable<number>;
             name: PropTypes.Requireable<string>;
         }>[]>;
+        const legendBelow: PropTypes.Requireable<boolean>;
         const itemsPercentagesValueAside: PropTypes.Requireable<boolean>;
         const itemsBoldedValues: PropTypes.Requireable<boolean>;
         const itemsValuesSeparateLine: PropTypes.Requireable<boolean>;
@@ -867,6 +869,8 @@ declare namespace TotalDoughnutChart {
         export { title_1 as title };
         const value_1: number;
         export { value_1 as value };
+        const rootFont_1: string;
+        export { rootFont_1 as rootFont };
         const addingBenchmark_1: boolean;
         export { addingBenchmark_1 as addingBenchmark };
         const dotCut_1: boolean;
@@ -877,6 +881,8 @@ declare namespace TotalDoughnutChart {
         export { currencyType_1 as currencyType };
         const legendData_1: any[];
         export { legendData_1 as legendData };
+        const legendBelow_1: boolean;
+        export { legendBelow_1 as legendBelow };
         const itemsPercentagesValueAside_1: boolean;
         export { itemsPercentagesValueAside_1 as itemsPercentagesValueAside };
         const itemsBoldedValues_1: boolean;

package/dist/index.esm.js

@@ -26343,28 +26343,24 @@ const scrollableStyles$5 = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 0.5em; /* 8px → 0.5em */
   }
 
   &::-webkit-scrollbar-track {
     background: #E8E8E8;
-    border-radius: 5px;
   }
 
   &::-webkit-scrollbar-thumb {
     background: #D0D0D0;
-    border-radius: 5px;
   }
 `;
 const ControlsContainer$4 = styled.div`
   position: relative;
   font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: ${props => props.rootFont};
+  font-size: ${props => props.rootFont || '1em'}; /* Base font size */
   color: ${props => props.textColor};
   width: ${props => props.width};
   height: ${props => props.height};
-  border-radius: 12px;
   display: flex;
   align-items: center;
   @media (max-width: 1536px) {
@@ -26386,79 +26382,79 @@ const Controls$3 = styled.div`
 const TooltipDiv$2 = styled.div`
   display: flex;
   background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  padding: 6px 10px;
+  padding: 0.375em 0.625em; /* 6px 10px → 0.375em 0.625em */
   margin: 0;
 `;
 const TooltipLabel$2 = styled.p`
   color: #212121;
   font-family: "Poppins", sans-serif;
-  font-size: 12px;
+  font-size: 0.75em; /* 12px → 0.75em */
   font-weight: 400;
   font-style: normal;
-  width: max-content; // fit-content;
+  width: max-content;
   line-height: normal;
   margin: 0;
 `;
 const TitleAndValueContainer$1 = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0 20px;
+  padding: 0 1.25em; /* 20px → 1.25em */
 `;
 const Title$9 = styled.h4`
   font-weight: 500;
-  font-size: ${props => props.titleFontSize};
+  font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
   margin: 0;
   @media (max-width: 1536px) {
-    font-size: 14px;
+    font-size: 0.875em; /* 14px → 0.875em */
   }
   @media (max-width: 1366px) {
-    font-size: 12px;
+    font-size: 0.75em; /* 12px → 0.75em */
   }
 `;
 const CurrencySignAndFormattedValueContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 0.3125em; /* 5px → 0.3125em */
   align-items: baseline;
 `;
 const CurrencySign$1 = styled.span`
   font-weight: 500;
-  font-size: 16px;
+  font-size: 1em; /* 16px → 1em */
   @media (max-width: 1536px) {
-    font-size: 14px;
+    font-size: 0.875em; /* 14px → 0.875em */
   }
   @media (max-width: 1366px) {
-    font-size: 11px;
+    font-size: 0.6875em; /* 11px → 0.6875em */
   }
 `;
 const FormattedValue$1 = styled.div`
   font-weight: 500;
-  font-size: ${props => props.FormattedValueFontSize};
+  font-size: ${props => props.FormattedValueFontSize || '2.5em'}; /* Default: 40px → 2.5em */
   @media (max-width: 1536px) {
-    font-size: 24px;
+    font-size: 1.5em; /* 24px → 1.5em */
   }
   @media (max-width: 1366px) {
-    font-size: 20px;
+    font-size: 1.25em; /* 20px → 1.25em */
   }
 `;
 const TextAfterValue = styled.div`  
   font-weight: 400;
-  font-size: 12px;
+  font-size: 0.75em; /* 12px → 0.75em */
   @media (max-width: 1536px) {
-    font-size: 11px;
+    font-size: 0.6875em; /* 11px → 0.6875em */
   }
   @media (max-width: 1366px) {
-    font-size: 10px;
+    font-size: 0.625em; /* 10px → 0.625em */
   }
 `;
 const DoughnutChartAndLegendContainer = styled.div`
   display: flex;
+  flex-direction: ${props => props.legendBelow ? 'column' : 'row'};
+  gap: 0.75em; /* 12px → 0.75em */
   justify-content: space-between;
   margin-top: auto;
-  padding: 0 20px ;
-  margin-bottom: 20px; 
+  padding: 0 1.25em; /* 20px → 1.25em */
+  margin-bottom: 1.25em; /* 20px → 1.25em */
 `;
 const DoughnutChartContainer = styled.div`
   display: flex;
@@ -26467,16 +26463,16 @@ const DoughnutChartContainer = styled.div`
   min-height: 90px; 
 `;
 const LegendContainer$2 = styled.div`
-  padding-left: 10px;
+  padding-left: 0.625em; /* 10px → 0.625em */
   display: flex;
   flex-direction: column;
   justify-content: space-evenly; 
 `;
 const LegendControlsContainer = styled.div`
   display: flex;
-  gap: 0.5rem;
+  gap: 0.5em; /* 8px → 0.5em */
   align-items: center;
-  margin-bottom: 0.375rem;
+  margin-bottom: 0.375em; /* 6px → 0.375em */
 `;
 const LegendTitleAndFormatedValueContainer = styled.div`
   flex-grow: 1;
@@ -26493,38 +26489,41 @@ const LegendColorRectangle = styled.div`
 `;
 const LegendTitle = styled.h5`
   font-weight: 400;
-  font-size: 16px;
-  gap: 5px;
+  font-size: 1em; /* 16px → 1em */
+  gap: 0.3125em; /* 5px → 0.3125em */
   margin: 0;
   display: flex;
   justify-content: space-between;
   @media (max-width: 1536px) {
-    font-size: 11px;
+    font-size: 0.6875em; /* 11px → 0.6875em */
   }
   @media (max-width: 1366px) {
-    font-size: 10px;
+    font-size: 0.625em; /* 10px → 0.625em */
   }
 `;
 const LegendFormattedValue = styled.span`
   font-weight: 500;
+  font-size: 0.875em; /* 14px → 0.875em */
   white-space: nowrap;
 `;
 
 const TotalDoughnutChart = props => {
   const {
     className,
+    width,
+    height,
     title,
     value,
+    rootFont,
     addingBenchmark,
     dotCut,
     currencySign,
     currencyType,
     legendData,
+    legendBelow,
     itemsPercentagesValueAside,
     itemsBoldedValues,
     itemsValuesSeparateLine,
-    width,
-    height,
     textcolor,
     titleFontSize,
     FormattedValueFontSize,
@@ -26591,6 +26590,7 @@ const TotalDoughnutChart = props => {
     className: className,
     height: height,
     width: width,
+    rootFont: rootFont,
     textcolor: textcolor
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
@@ -26614,7 +26614,9 @@ const TotalDoughnutChart = props => {
     className: "CurrencySign"
   }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : ''), textAfterValue ? /*#__PURE__*/React$1.createElement(TextAfterValue, {
     className: "TextAfterValue"
-  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React$1.createElement(Benchmark, null))), /*#__PURE__*/React$1.createElement(DoughnutChartAndLegendContainer, null, /*#__PURE__*/React$1.createElement(DoughnutChartContainer, {
+  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React$1.createElement(Benchmark, null))), /*#__PURE__*/React$1.createElement(DoughnutChartAndLegendContainer, {
+    legendBelow: legendBelow
+  }, /*#__PURE__*/React$1.createElement(DoughnutChartContainer, {
     width: width,
     height: height,
     ref: DoughnutChartContainerRef
@@ -26649,6 +26651,7 @@ TotalDoughnutChart.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.number,
+  rootFont: PropTypes.string,
   addingBenchmark: PropTypes.bool,
   dotCut: PropTypes.bool,
   currencySign: PropTypes.bool,
@@ -26658,6 +26661,7 @@ TotalDoughnutChart.propTypes = {
     value: PropTypes.number,
     name: PropTypes.string
   })),
+  legendBelow: PropTypes.bool,
   itemsPercentagesValueAside: PropTypes.bool,
   itemsBoldedValues: PropTypes.bool,
   itemsValuesSeparateLine: PropTypes.bool,
@@ -26675,11 +26679,13 @@ TotalDoughnutChart.defaultProps = {
   className: '',
   title: '',
   value: 0,
+  rootFont: '18px',
   addingBenchmark: false,
   dotCut: false,
   currencySign: false,
   currencyType: 'USD',
   legendData: [],
+  legendBelow: false,
   itemsPercentagesValueAside: true,
   itemsBoldedValues: true,
   itemsValuesSeparateLine: true,