sag_components 2.0.0-beta77 → 2.0.0-beta79

package/dist/index.esm.js

@@ -23884,7 +23884,6 @@ const Label$2 = styled.label`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.disabled ? '#D0D0D0' : '212121'};
-  font-family: "Poppins";
   white-space: nowrap;
 `;
 const InputContainer$1 = styled.div`
@@ -23896,7 +23895,6 @@ const InputContainer$1 = styled.div`
   overflow: hidden;
   padding: 6px 16px;
   margin-bottom: 8px;
-  width: 256px;
   height: 24px;
   border: 1px solid
     ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
@@ -23956,7 +23954,6 @@ const OptionsSubContainer$1 = styled.ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: "Poppins";
   border-radius: 4px;
   background-color: white;
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -23968,9 +23965,7 @@ const OptionItem$1 = styled.li`
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: "Poppins";
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
   background-color: ${props => props.selected ? '#C7E4FF' : '#fff'};
@@ -31607,7 +31602,9 @@ styleInject(css_248z);
 
 const BarLine = props => {
   const {
-    brushAreaBarData
+    brushAreaBarData,
+    color,
+    lineColor
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushAreaBarData.length);
   const MAX_LINES = 2;
@@ -31721,11 +31718,11 @@ const BarLine = props => {
   }), /*#__PURE__*/React$1.createElement(Line, {
     type: "monotone",
     dataKey: "inc_roi",
-    stroke: "#F8CD00",
+    stroke: lineColor,
     strokeWidth: 2,
     dot: {
       r: 4,
-      fill: "#F8CD00"
+      fill: lineColor
     },
     activeDot: false,
     name: "INC Sales ROI"
@@ -31777,7 +31774,7 @@ const BarLine = props => {
     cursor: brushAreaBarData.length > 80
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "inc_sales",
-    fill: "#CCDCDD",
+    fill: color,
     gap: 4,
     barSize: 53,
     name: "INC Sales"
@@ -31800,11 +31797,11 @@ const BarLine = props => {
     width: "100%",
     height: "40px",
     legendData: [{
-      iconColor: "#CCDCDD",
+      iconColor: color,
       iconType: "Square",
       title: "INC Sales"
     }, {
-      iconColor: "#F8CD00",
+      iconColor: lineColor,
       iconType: "LegendUnionIcon",
       title: "INC Sales ROI"
     }]
@@ -31813,7 +31810,8 @@ const BarLine = props => {
 
 const SingleChart = props => {
   const {
-    barData
+    barData,
+    color
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(barData.length);
   const MAX_LINES = 2;
@@ -31915,7 +31913,7 @@ const SingleChart = props => {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "value",
-    fill: "#CCDCDD",
+    fill: color,
     barSize: 53,
     name: "INC Sales"
   }, /*#__PURE__*/React$1.createElement(LabelList, {
@@ -31937,7 +31935,7 @@ const SingleChart = props => {
     width: "100%",
     height: "40px",
     legendData: [{
-      iconColor: "#CCDCDD",
+      iconColor: color,
       iconType: "Square",
       title: "INC Units"
     }]
@@ -31946,7 +31944,9 @@ const SingleChart = props => {
 
 const InnerBar = props => {
   const {
-    brushInnerBarData
+    brushInnerBarData,
+    color,
+    backgroundColor
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushInnerBarData.length);
   const MAX_LINES = 2;
@@ -31967,7 +31967,7 @@ const InnerBar = props => {
       y: y,
       width: width,
       height: height,
-      fill: "#d0e6ea",
+      fill: backgroundColor,
       rx: 4,
       ry: 4
     }), /*#__PURE__*/React$1.createElement("text", {
@@ -31983,7 +31983,7 @@ const InnerBar = props => {
       y: innerY,
       width: width * 0.6,
       height: innerHeight,
-      fill: "#07575b",
+      fill: color,
       rx: 2,
       ry: 2
     }), innerHeight > 16 && /*#__PURE__*/React$1.createElement("text", {
@@ -32107,11 +32107,11 @@ const InnerBar = props => {
     width: "100%",
     height: "40px",
     legendData: [{
-      iconColor: "#CCDCDD",
+      iconColor: backgroundColor,
       iconType: "Square",
       title: "New Shoppers"
     }, {
-      iconColor: "#07575b",
+      iconColor: color,
       iconType: "Square",
       title: "Repeaters"
     }]
@@ -32127,7 +32127,10 @@ const BrushChart = props => {
     brushBarBasketData,
     brushAreaBarData,
     segmentedbuttonOptions,
-    title
+    title,
+    lineChartColor,
+    innerChartColor,
+    barChartColor
   } = props;
   const [selectedOption, setSelectedOption] = useState(segmentedbuttonOptions[0]);
   return /*#__PURE__*/React$1.createElement(Container, {
@@ -32145,12 +32148,18 @@ const BrushChart = props => {
       return setSelectedOption(value);
     }
   }), /*#__PURE__*/React$1.createElement(ChartContainer, null, selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React$1.createElement(InnerBar, {
+    color: innerChartColor,
+    backgroundColor: barChartColor,
     brushInnerBarData: brushInnerBarData
   }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(BarLine, {
+    color: barChartColor,
+    lineColor: lineChartColor,
     brushAreaBarData: brushAreaBarData
   }), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, {
+    color: barChartColor,
     barData: brushBarIncData
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, {
+    color: barChartColor,
     barData: brushBarBasketData
   })));
 };