sag_components 2.0.0-beta42 → 2.0.0-beta44

package/dist/index.d.ts

@@ -838,6 +838,8 @@ declare namespace TotalDoughnutChart {
         const className: PropTypes.Requireable<string>;
         const title: PropTypes.Requireable<string>;
         const value: PropTypes.Requireable<number>;
+        const rootFont: PropTypes.Requireable<string>;
+        const containerPadding: PropTypes.Requireable<string>;
         const addingBenchmark: PropTypes.Requireable<boolean>;
         const dotCut: PropTypes.Requireable<boolean>;
         const currencySign: PropTypes.Requireable<boolean>;
@@ -868,6 +870,10 @@ 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 containerPadding_1: string;
+        export { containerPadding_1 as containerPadding };
         const addingBenchmark_1: boolean;
         export { addingBenchmark_1 as addingBenchmark };
         const dotCut_1: boolean;

package/dist/index.esm.js

@@ -26343,27 +26343,25 @@ 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-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;
+  padding: ${props => props.containerPadding || '0'};
   display: flex;
   align-items: center;
   @media (max-width: 1536px) {
@@ -26385,81 +26383,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: 12px;
+  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;
@@ -26468,16 +26464,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;
@@ -26494,28 +26490,33 @@ 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,
+    containerPadding,
     addingBenchmark,
     dotCut,
     currencySign,
@@ -26525,8 +26526,6 @@ const TotalDoughnutChart = props => {
     itemsPercentagesValueAside,
     itemsBoldedValues,
     itemsValuesSeparateLine,
-    width,
-    height,
     textcolor,
     titleFontSize,
     FormattedValueFontSize,
@@ -26593,6 +26592,8 @@ const TotalDoughnutChart = props => {
     className: className,
     height: height,
     width: width,
+    rootFont: rootFont,
+    containerPadding: containerPadding,
     textcolor: textcolor
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
@@ -26653,6 +26654,8 @@ TotalDoughnutChart.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.number,
+  rootFont: PropTypes.string,
+  containerPadding: PropTypes.string,
   addingBenchmark: PropTypes.bool,
   dotCut: PropTypes.bool,
   currencySign: PropTypes.bool,
@@ -26680,6 +26683,8 @@ TotalDoughnutChart.defaultProps = {
   className: '',
   title: '',
   value: 0,
+  rootFont: '18px',
+  containerPadding: '0px',
   addingBenchmark: false,
   dotCut: false,
   currencySign: false,