sag_components 2.0.0-beta140 → 2.0.0-beta141

package/dist/index.esm.js

@@ -10317,23 +10317,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10775,22 +10776,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23901,21 +23903,22 @@ const DeleteIcon = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24312,23 +24315,24 @@ const IconContainer$2 = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35560,9 +35564,9 @@ const ToggleSlider = styled.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 {
@@ -35697,9 +35701,12 @@ const ContainerTable = props => {
 
 const MenuRouteContainer = styled.div`
   font-family: 'Poppins', sans-serif;
+  width: ${props => props.width || '100%'};
 `;
 const ButtonGroup = styled.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':
@@ -35719,14 +35726,32 @@ const Button = styled.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 {
@@ -35738,6 +35763,14 @@ const Button = styled.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,
@@ -35760,16 +35793,26 @@ const MenuRoute = props => {
       onTabClick(key);
     }
   };
-  return /*#__PURE__*/React$1.createElement(MenuRouteContainer, null, /*#__PURE__*/React$1.createElement(ButtonGroup, {
-    pos: tabsPosition
+  return /*#__PURE__*/React$1.createElement(MenuRouteContainer, {
+    width: width
+  }, /*#__PURE__*/React$1.createElement(ButtonGroup, {
+    pos: tabsPosition,
+    layout: layout
   }, items.map(item => /*#__PURE__*/React$1.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$1.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$1.isValidElement(item.label) ? item.label : item.label))));
 };
 
@@ -35846,6 +35889,380 @@ const Execute = _ref => {
   }));
 };
 
+const Dashboard = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M3 3H10V11H3V3ZM14 3H21V7H14V3ZM14 11H21V21H14V11ZM3 15H10V21H3V15Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: fill
+  }));
+};
+
+const Coupons = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "15",
+    cy: "9",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "9",
+    cy: "15",
+    r: "1",
+    fill: "white"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "15",
+    cy: "15",
+    r: "1",
+    fill: "white"
+  }));
+};
+
+const RulesEngine = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M8 3L4 9L8 15H12L16 9L12 3H8Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M13 21L9 15L13 9L17 15L13 21Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "2",
+    fill: "white"
+  }));
+};
+
+const AdvancedThresholds = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "6",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: fill
+  }));
+};
+
+const PreTestWhatIf = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M12 2L2 7L12 12L22 7L12 2Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M2 17L12 22L22 17",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("circle", {
+    cx: "9",
+    cy: "7",
+    r: "4",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M3 21V19C3 16.79 4.79 15 7 15H11C13.21 15 15 16.79 15 19V21",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "17",
+    cy: "7",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("circle", {
+    cx: "6",
+    cy: "6",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "18",
+    cy: "6",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "6",
+    cy: "18",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "18",
+    cy: "18",
+    r: "3",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M9 6H15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M6 9V15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M18 9V15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M9 18H15",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }));
+};
+
+const ItemsStores = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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$1.createElement("path", {
+    d: "M9 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M12 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M15 8V17",
+    stroke: "white",
+    strokeWidth: "1"
+  }));
+};
+
+const Analytics = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M3 3V21H21",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M7 16L12 11L16 15L21 10",
+    fill: "none",
+    stroke: fill,
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "7",
+    cy: "16",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "12",
+    cy: "11",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "16",
+    cy: "15",
+    r: "2",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("circle", {
+    cx: "21",
+    cy: "10",
+    r: "2",
+    fill: fill
+  }));
+};
+
 const scrollableStyles$1 = `
   &::-webkit-scrollbar {
     height: 8px;
@@ -52506,5 +52923,5 @@ const QuickFilterCards = _ref => {
   }));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map