sag_components 2.0.0-beta41 → 2.0.0-beta43

package/dist/index.js

@@ -26353,28 +26353,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__default["default"].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) {
@@ -26396,79 +26392,79 @@ const Controls$3 = styled__default["default"].div`
 const TooltipDiv$2 = styled__default["default"].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__default["default"].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__default["default"].div`
   display: flex;
   flex-direction: column;
-  padding: 0 20px;
+  padding: 0 1.25em; /* 20px → 1.25em */
 `;
 const Title$9 = styled__default["default"].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__default["default"].div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 0.3125em; /* 5px → 0.3125em */
   align-items: baseline;
 `;
 const CurrencySign$1 = styled__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].div`
   display: flex;
@@ -26477,16 +26473,16 @@ const DoughnutChartContainer = styled__default["default"].div`
   min-height: 90px; 
 `;
 const LegendContainer$2 = styled__default["default"].div`
-  padding-left: 10px;
+  padding-left: 0.625em; /* 10px → 0.625em */
   display: flex;
   flex-direction: column;
   justify-content: space-evenly; 
 `;
 const LegendControlsContainer = styled__default["default"].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__default["default"].div`
   flex-grow: 1;
@@ -26503,38 +26499,41 @@ const LegendColorRectangle = styled__default["default"].div`
 `;
 const LegendTitle = styled__default["default"].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__default["default"].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,
@@ -26601,6 +26600,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__default["default"].createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
@@ -26624,7 +26624,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__default["default"].createElement(TextAfterValue, {
     className: "TextAfterValue"
-  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React__default["default"].createElement(Benchmark, null))), /*#__PURE__*/React__default["default"].createElement(DoughnutChartAndLegendContainer, null, /*#__PURE__*/React__default["default"].createElement(DoughnutChartContainer, {
+  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React__default["default"].createElement(Benchmark, null))), /*#__PURE__*/React__default["default"].createElement(DoughnutChartAndLegendContainer, {
+    legendBelow: legendBelow
+  }, /*#__PURE__*/React__default["default"].createElement(DoughnutChartContainer, {
     width: width,
     height: height,
     ref: DoughnutChartContainerRef
@@ -26659,6 +26661,7 @@ TotalDoughnutChart.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.number,
+  rootFont: PropTypes.string,
   addingBenchmark: PropTypes.bool,
   dotCut: PropTypes.bool,
   currencySign: PropTypes.bool,
@@ -26668,6 +26671,7 @@ TotalDoughnutChart.propTypes = {
     value: PropTypes.number,
     name: PropTypes.string
   })),
+  legendBelow: PropTypes.bool,
   itemsPercentagesValueAside: PropTypes.bool,
   itemsBoldedValues: PropTypes.bool,
   itemsValuesSeparateLine: PropTypes.bool,
@@ -26685,11 +26689,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,