sag_components 2.0.0-beta140 → 2.0.0-beta141

package/dist/index.js

@@ -10327,23 +10327,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -10785,22 +10786,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -23911,21 +23913,22 @@ const DeleteIcon = styled__default["default"].div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24322,23 +24325,24 @@ const IconContainer$2 = styled__default["default"].div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -35570,9 +35574,9 @@ const ToggleSlider = styled__default["default"].span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -35707,9 +35711,12 @@ const ContainerTable = props => {
 
 const MenuRouteContainer = styled__default["default"].div`
   font-family: 'Poppins', sans-serif;
+  width: ${props => props.width || '100%'};
 `;
 const ButtonGroup = styled__default["default"].div`
   display: flex;
+  flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+  gap: ${props => props.layout === 'vertical' ? '20px' : '0px'};
   justify-content: ${props => {
   switch (props.pos) {
     case 'left':
@@ -35729,14 +35736,32 @@ const Button = styled__default["default"].button`
   display: flex;
   gap: 12px;
   align-items: center;
-  color: #212121;
-  padding: 0 24px 10px;
-  font-size: 16px;
-  font-weight: 600;
+  color: ${props => props.notSelectedColor || '#212121'};
+  padding: 12px 24px;
+  font-family: 'Poppins', sans-serif;
+  font-size: ${props => props.fontSize || '16px'};
+  font-weight: ${props => props.fontWeight || '600'};
+  border-radius: 8px;
+  cursor: pointer;
+  min-height: 44px;
+  box-sizing: border-box;
+  position: relative;
 
   &.active {
     color: ${props => props.color || '#066768'};
-    border-bottom: 3px solid ${props => props.color || '#066768'};
+    background-color: ${props => props.selectedBackgroundColor || 'transparent'};
+    
+    ${props => props.layout !== 'vertical' && `
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background-color: ${props.color || '#066768'};
+      }
+    `}
   }
 
   &:disabled {
@@ -35748,6 +35773,14 @@ const Button = styled__default["default"].button`
 const MenuRoute = props => {
   const {
     tabsPosition,
+    layout = 'horizontal',
+    width = '100%',
+    fontSize = '16px',
+    fontWeight = '600',
+    notSelectedColor = '#212121',
+    selectedBackgroundColor = 'transparent',
+    iconSize = '24',
+    iconColor = '#212121',
     items,
     color,
     selecetIndex = 0,
@@ -35770,16 +35803,26 @@ const MenuRoute = props => {
       onTabClick(key);
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(MenuRouteContainer, null, /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
-    pos: tabsPosition
+  return /*#__PURE__*/React__default["default"].createElement(MenuRouteContainer, {
+    width: width
+  }, /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
+    pos: tabsPosition,
+    layout: layout
   }, items.map(item => /*#__PURE__*/React__default["default"].createElement(Button, {
     key: item.key,
     onClick: () => handleItemClick(item.key, item),
     disabled: item.disabled,
     className: activeItem === item.key ? 'active' : '',
-    color: color
+    color: color,
+    layout: layout,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    notSelectedColor: notSelectedColor,
+    selectedBackgroundColor: selectedBackgroundColor
   }, item.icon && /*#__PURE__*/React__default["default"].cloneElement(item.icon, {
-    fill: item.disabled ? '#717171' : activeItem === item.key ? color : item.icon.props.fill
+    width: iconSize,
+    height: iconSize,
+    fill: item.disabled ? '#717171' : activeItem === item.key ? color : iconColor
   }), /*#__PURE__*/React__default["default"].isValidElement(item.label) ? item.label : item.label))));
 };
 
@@ -35856,6 +35899,380 @@ const Execute = _ref => {
   }));
 };
 
+const Dashboard = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 3H10V11H3V3ZM14 3H21V7H14V3ZM14 11H21V21H14V11ZM3 15H10V21H3V15Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M4 4V10H9V4H4ZM15 4V6H20V4H15ZM15 12V20H20V12H15ZM4 16V20H9V16H4Z",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "0.5"
+  }));
+};
+
+const Campaigns = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2L13.09 8.26L20.5 7L18.5 13.74L21 20L13.09 15.74L12 22L10.91 15.74L3 20L5.5 13.74L2.5 7L9.91 8.26L12 2Z",
+    fill: fill
+  }));
+};
+
+const Budgets = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13.5 6L15.5 7.5L14 9H16V11H13V13H16V15H13V17H11V15H9V13H10.5L12 11.5V9.5L10.5 8H9V6H11V4H13V6H13.5Z",
+    fill: fill
+  }));
+};
+
+const SampleRunEngine = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.27L5.82 21L7 14L2 9L8.91 8.26L12 2Z",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: fill
+  }));
+};
+
+const Coupons = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M21 7V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V7C4.1 7 5 7.9 5 9S4.1 11 3 11V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V11C19.9 11 19 10.1 19 9S19.9 7 21 7Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "15",
+    cy: "9",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "9",
+    cy: "15",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "15",
+    cy: "15",
+    r: "1",
+    fill: "white"
+  }));
+};
+
+const RulesEngine = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M8 3L4 9L8 15H12L16 9L12 3H8Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M13 21L9 15L13 9L17 15L13 21Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "2",
+    fill: "white"
+  }));
+};
+
+const AdvancedThresholds = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "6",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: fill
+  }));
+};
+
+const PreTestWhatIf = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2L2 7L12 12L22 7L12 2Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2 17L12 22L22 17",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2 12L12 17L22 12",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }));
+};
+
+const CustomerSegments = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "9",
+    cy: "7",
+    r: "4",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 21V19C3 16.79 4.79 15 7 15H11C13.21 15 15 16.79 15 19V21",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "17",
+    cy: "7",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M21 21V20C21 18.35 19.65 17 18 17H16C15.45 17 14.95 17.22 14.59 17.59",
+    fill: fill
+  }));
+};
+
+const GroupBuilder = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "6",
+    cy: "6",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "18",
+    cy: "6",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "6",
+    cy: "18",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "18",
+    cy: "18",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9 6H15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 9V15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M18 9V15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9 18H15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }));
+};
+
+const ItemsStores = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7 4V2C7 1.45 7.45 1 8 1H16C16.55 1 17 1.45 17 2V4H20C20.55 4 21 4.45 21 5S20.55 6 20 6H19V19C19 20.1 18.1 21 17 21H7C5.9 21 5 20.1 5 19V6H4C3.45 6 3 5.55 3 5S3.45 4 4 4H7Z",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M15 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }));
+};
+
+const Analytics = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 3V21H21",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7 16L12 11L16 15L21 10",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "7",
+    cy: "16",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "11",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "16",
+    cy: "15",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "21",
+    cy: "10",
+    r: "2",
+    fill: fill
+  }));
+};
+
 const scrollableStyles$1 = `
   &::-webkit-scrollbar {
     height: 8px;
@@ -52516,6 +52933,8 @@ const QuickFilterCards = _ref => {
   }));
 };
 
+exports.AdvancedThresholds = AdvancedThresholds;
+exports.Analytics = Analytics;
 exports.AreaChart = AreaChart;
 exports.BannerEventBoxList = BannerEventBoxList;
 exports.BarChart = BarChart;
@@ -52526,11 +52945,16 @@ exports.BatteryChart = BatteryChart;
 exports.BreakdownPanel = BreakdownPanel;
 exports.BrushChart = BrushChart;
 exports.BubbleChart = BubbleChart;
+exports.Budgets = Budgets;
 exports.Build = Build;
 exports.Button = Button$1;
+exports.Campaigns = Campaigns;
 exports.CollapseData = CollapseData;
 exports.CollapseHeader = CollapseHeader;
 exports.ContainerTable = ContainerTable;
+exports.Coupons = Coupons;
+exports.CustomerSegments = CustomerSegments;
+exports.Dashboard = Dashboard;
 exports.DialogOverlay = DialogOverlay$1;
 exports.DoubleBarSingleLine = DoubleBarSingleLine;
 exports.DoublePanelDataRow = DoublePanelDataRow;
@@ -52541,11 +52965,13 @@ exports.EventList = EventList;
 exports.Execute = Execute;
 exports.FilterPanel = FilterPanel;
 exports.FilterPop = FilterPop;
+exports.GroupBuilder = GroupBuilder;
 exports.Heatmap = Heatmap;
 exports.IconButton = IconButton$1;
 exports.Input = Input$2;
 exports.InsightsCarousel = InsightsCarousel;
 exports.ItemManagerPanel = ItemManagerPanel;
+exports.ItemsStores = ItemsStores;
 exports.LinkButton = LinkButton;
 exports.LinnerDataBox = LinnerDataBox;
 exports.MarketShareDescription = MarketShareDescription;
@@ -52558,11 +52984,14 @@ exports.OverlayDropdown = OverlayDropdown;
 exports.PerformanceAnalyticsLegend = PerformanceAnalyticsLegend;
 exports.PieChart = PieChart;
 exports.PopupCharts = PopupCharts;
+exports.PreTestWhatIf = PreTestWhatIf;
 exports.QuickFilter = QuickFilter;
 exports.QuickFilterCards = QuickFilterCards;
 exports.RangePicker = RangePicker;
 exports.RangePop = RangePop;
 exports.ReportTable = ReportTable;
+exports.RulesEngine = RulesEngine;
+exports.SampleRunEngine = SampleRunEngine;
 exports.SearchInput = SearchInput;
 exports.SingleBarLineCharts = SingleBarLineCharts;
 exports.SortPop = SortPop;