sag_components 2.0.0-beta131 → 2.0.0-beta132

package/dist/index.js

@@ -426,20 +426,23 @@ const RedDot = ({
   fill: "#F00021"
 }));
 
-const CalendarInOpen = ({
-  width = "16",
-  height = "17",
-  fill = "#726F6F"
-}) => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 16 17",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M5.375 2.7002C5.5625 2.7002 5.75 2.87327 5.75 3.04635V4.08481H10.25V3.04635C10.25 2.87327 10.4141 2.7002 10.625 2.7002C10.8125 2.7002 11 2.87327 11 3.04635V4.08481H11.75C12.5703 4.08481 13.25 4.71222 13.25 5.46943V6.16173V6.85404V12.3925C13.25 13.1714 12.5703 13.7771 11.75 13.7771H4.25C3.40625 13.7771 2.75 13.1714 2.75 12.3925V6.85404V6.16173V5.46943C2.75 4.71222 3.40625 4.08481 4.25 4.08481H5V3.04635C5 2.87327 5.16406 2.7002 5.375 2.7002ZM12.5 6.85404H10.0625V8.41173H12.5V6.85404ZM12.5 9.10404H10.0625V10.8348H12.5V9.10404ZM12.5 11.5271H10.0625V13.0848H11.75C12.1484 13.0848 12.5 12.7819 12.5 12.3925V11.5271ZM9.3125 10.8348V9.10404H6.6875V10.8348H9.3125ZM6.6875 11.5271V13.0848H9.3125V11.5271H6.6875ZM5.9375 10.8348V9.10404H3.5V10.8348H5.9375ZM3.5 11.5271V12.3925C3.5 12.7819 3.82812 13.0848 4.25 13.0848H5.9375V11.5271H3.5ZM3.5 8.41173H5.9375V6.85404H3.5V8.41173ZM6.6875 8.41173H9.3125V6.85404H6.6875V8.41173ZM11.75 4.77712H4.25C3.82812 4.77712 3.5 5.10164 3.5 5.46943V6.16173H12.5V5.46943C12.5 5.10164 12.1484 4.77712 11.75 4.77712Z",
-  fill: fill
-}));
+const CalendarInOpen = _ref => {
+  let {
+    width = "16",
+    height = "17",
+    fill = "#726F6F"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M5.375 2.7002C5.5625 2.7002 5.75 2.87327 5.75 3.04635V4.08481H10.25V3.04635C10.25 2.87327 10.4141 2.7002 10.625 2.7002C10.8125 2.7002 11 2.87327 11 3.04635V4.08481H11.75C12.5703 4.08481 13.25 4.71222 13.25 5.46943V6.16173V6.85404V12.3925C13.25 13.1714 12.5703 13.7771 11.75 13.7771H4.25C3.40625 13.7771 2.75 13.1714 2.75 12.3925V6.85404V6.16173V5.46943C2.75 4.71222 3.40625 4.08481 4.25 4.08481H5V3.04635C5 2.87327 5.16406 2.7002 5.375 2.7002ZM12.5 6.85404H10.0625V8.41173H12.5V6.85404ZM12.5 9.10404H10.0625V10.8348H12.5V9.10404ZM12.5 11.5271H10.0625V13.0848H11.75C12.1484 13.0848 12.5 12.7819 12.5 12.3925V11.5271ZM9.3125 10.8348V9.10404H6.6875V10.8348H9.3125ZM6.6875 11.5271V13.0848H9.3125V11.5271H6.6875ZM5.9375 10.8348V9.10404H3.5V10.8348H5.9375ZM3.5 11.5271V12.3925C3.5 12.7819 3.82812 13.0848 4.25 13.0848H5.9375V11.5271H3.5ZM3.5 8.41173H5.9375V6.85404H3.5V8.41173ZM6.6875 8.41173H9.3125V6.85404H6.6875V8.41173ZM11.75 4.77712H4.25C3.82812 4.77712 3.5 5.10164 3.5 5.46943V6.16173H12.5V5.46943C12.5 5.10164 12.1484 4.77712 11.75 4.77712Z",
+    fill: fill
+  }));
+};
 
 const Calendar = () => /*#__PURE__*/React__default["default"].createElement("svg", {
   width: "11",
@@ -452,6 +455,42 @@ const Calendar = () => /*#__PURE__*/React__default["default"].createElement("svg
   fill: "#568202"
 }));
 
+const ChervronRightIcon = _ref => {
+  let {
+    width = "8",
+    height = "13",
+    fill = "#777575"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
+    fill: fill
+  }));
+};
+
+const ChervronLeftIcon = _ref => {
+  let {
+    width = 7,
+    height = 13,
+    fill = "#777575"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 7 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
+    fill: fill
+  }));
+};
+
 const Button$1 = props => {
   const {
     text = "",
@@ -494,7 +533,9 @@ const Button$1 = props => {
     exit: ExitIcon,
     eye: EyeIcon,
     reselect: ReselectIcon,
-    plus: Plus
+    plus: Plus,
+    left: ChervronLeftIcon,
+    right: ChervronRightIcon
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
@@ -502,7 +543,8 @@ const Button$1 = props => {
     const iconProps = {
       height: "16px",
       width: "16px",
-      color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
+      color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff"),
+      fill: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
     };
     return /*#__PURE__*/React__default["default"].createElement(IconWrapper$6, null, /*#__PURE__*/React__default["default"].createElement(IconComponent, iconProps));
   };
@@ -2540,7 +2582,7 @@ const TitleWrapper$1 = styled__default["default"].div`
   gap: 10px;
   align-items: baseline;
 `;
-const CardTitle$1 = styled__default["default"].span`
+const CardTitle$2 = styled__default["default"].span`
   font-size: 18px;
   font-weight: 400;
 `;
@@ -3324,7 +3366,7 @@ const EventDetailsCard = props => {
     className: className,
     height: height,
     width: width
-  }, /*#__PURE__*/React.createElement(TitleWrapper$1, null, /*#__PURE__*/React.createElement(CardTitle$1, null, title), displayBannersDropdown && /*#__PURE__*/React.createElement(BannersDropdown, {
+  }, /*#__PURE__*/React.createElement(TitleWrapper$1, null, /*#__PURE__*/React.createElement(CardTitle$2, null, title), displayBannersDropdown && /*#__PURE__*/React.createElement(BannersDropdown, {
     banners: [{
       checked: true,
       name: 'StopAndShop'
@@ -9628,42 +9670,6 @@ const OptionsContainer$5 = styled__default["default"].div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = _ref => {
-  let {
-    width = "8",
-    height = "13",
-    fill = "#777575"
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 8 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
-    fill: fill
-  }));
-};
-
-const ChervronLeftIcon = _ref => {
-  let {
-    width = 7,
-    height = 13,
-    fill = "#777575"
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 7 13",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
-    fill: fill
-  }));
-};
-
 /* eslint-disable react/prop-types */
 
 // Styled components for the date picker
@@ -9883,20 +9889,21 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState(''); // Added value state
@@ -10320,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('');
@@ -10778,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('');
@@ -12836,7 +12845,7 @@ const TitleWrapper = styled__default["default"].div`
     margin-bottom: 20px;
     gap: 6px;
 `;
-const CardTitle = styled__default["default"].h5`
+const CardTitle$1 = styled__default["default"].h5`
     font-size: 14px;
     font-weight: 400;
     margin: 0;
@@ -12940,7 +12949,7 @@ const BannerEventBox = props => {
   return /*#__PURE__*/React__default["default"].createElement(MainContainer$4, {
     height: height,
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React__default["default"].createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React__default["default"].createElement(Block, null, /*#__PURE__*/React__default["default"].createElement(Headline, null, "Event Description"), /*#__PURE__*/React__default["default"].createElement(Text, null, description)), /*#__PURE__*/React__default["default"].createElement(Block, null, /*#__PURE__*/React__default["default"].createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React__default["default"].createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React__default["default"].createElement(ButtonWrap, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React__default["default"].createElement(CardTitle$1, null, formatedBanners().name)), /*#__PURE__*/React__default["default"].createElement(Block, null, /*#__PURE__*/React__default["default"].createElement(Headline, null, "Event Description"), /*#__PURE__*/React__default["default"].createElement(Text, null, description)), /*#__PURE__*/React__default["default"].createElement(Block, null, /*#__PURE__*/React__default["default"].createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React__default["default"].createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React__default["default"].createElement(ButtonWrap, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     leftIcon: "Eye",
     onClick: () => onInfoClickHandler(banner),
     text: buttonText,
@@ -23904,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("");
@@ -24315,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('');
@@ -26375,7 +26386,7 @@ styled__default["default"].div`
     border-radius: 5px;
   }
 `;
-const CardHeader = styled__default["default"].div`
+const CardHeader$1 = styled__default["default"].div`
   padding: 16px;
   position: sticky;
   top: 0;
@@ -26549,7 +26560,7 @@ const TotalHorizontalCharts = props => {
     textColor: textColor,
     scroller: chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden',
     className: className
-  }, chartsData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(CardHeader, {
+  }, chartsData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(CardHeader$1, {
     ref: topHeader,
     className: "CardHeader"
   }, !hideTitle ? /*#__PURE__*/React__default["default"].createElement(Title$m, null, title) : '', !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(TotalValue, {
@@ -35563,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 {
@@ -36859,7 +36870,7 @@ const TruncatedText$1 = styled__default["default"].span`
   text-overflow: ellipsis;
   font-size: 14px;
 `;
-const Checkmark = styled__default["default"].span`
+const Checkmark$1 = styled__default["default"].span`
   color: ${props => props.color};
   margin-left: 8px;
   font-weight: bold;
@@ -36958,7 +36969,7 @@ const SortPop = props => {
     onClick: () => {
       handleChange(item);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark, {
+  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark$1, {
     color: color
   }, "\u2713")))), /*#__PURE__*/React__default["default"].createElement(ButtonWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(ResetButton, {
     onClick: handleReset,
@@ -41373,14 +41384,14 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = props => {
+const Table = /*#__PURE__*/React$1.forwardRef((props, ref) => {
   const {
-    ref,
     width = '100%',
     height = 'auto',
     tableTitle = 'All Events',
     data = [],
     counter = 0,
+    hideRowsCounter = false,
     onButtonClick = () => {},
     buttonColor = '#066768',
     buttonHoverColor = '#388586',
@@ -41482,7 +41493,7 @@ const Table = props => {
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper, {
     width: width,
     height: height
-  }, /*#__PURE__*/React__default["default"].createElement(NoInfoFound, null, /*#__PURE__*/React__default["default"].createElement(TableTop, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title$7, null, tableTitle), /*#__PURE__*/React__default["default"].createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(NoInfoFound, null, /*#__PURE__*/React__default["default"].createElement(TableTop, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title$7, null, tableTitle), !hideRowsCounter && /*#__PURE__*/React__default["default"].createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41533,7 +41544,10 @@ const Table = props => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React__default["default"].createElement(LoadingText, null, isLoadingText)))));
-};
+});
+
+// Add displayName for better debugging
+Table.displayName = 'Table';
 
 const Card = styled__default["default"].div`
   background: ${props => props.backgroundColor};
@@ -41761,7 +41775,7 @@ const VendorSearchResult = styled__default["default"].span`
   display: block;
   font-size: 16px;
   font-weight: 400;
-  height: 20px;
+  /* height: 20px; */
 `;
 const VendorNameAndPackagesContainer = styled__default["default"].div`
   display: flex;
@@ -52323,6 +52337,153 @@ const ToasterMessageBox = _ref => {
   }, linkText));
 };
 
+const CardsContainer = styled__default["default"].div`
+  display: flex;
+  gap: 16px;
+  width: ${props => props.width || '100%'};
+  font-family: "Poppins", sans-serif;
+  justify-content: space-between;
+`;
+const StatusCard = styled__default["default"].div`
+  position: relative;
+  background-color: white;
+  border-bottom: 3px solid ${props => props.isSelected ? props.borderColor : '#E0E0E0'};
+  border-radius: 12px;
+  padding: 12px 16px;
+  flex-grow: 1;
+  flex-basis: 0;
+`;
+const CardHeader = styled__default["default"].div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+const Circle = styled__default["default"].div`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: ${props => props.color};
+  margin-right: 8px;
+`;
+const CardTitle = styled__default["default"].h3`
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: ${props => props.isSelected ? props.color : '#666666'};
+  transition: color 0.2s ease-in-out;
+`;
+const Checkmark = styled__default["default"].input`
+  width: 16px;
+  height: 16px;
+  accent-color: #066768;
+  margin-left: auto;
+  &:checked {
+    filter: invert(1) hue-rotate(180deg) brightness(2);
+  }
+`;
+const CardContent = styled__default["default"].div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const StatusCount = styled__default["default"].h4`
+  font-size: 32px;
+  font-weight: 500;
+  color: ${props => props.isSelected ? props.color : '#999999'};
+  line-height: 1;
+  margin: 0;
+  transition: color 0.2s ease-in-out;
+`;
+
+const EventStatusCards = _ref => {
+  let {
+    statusData = [],
+    onStatusToggle = () => {},
+    disabled = false,
+    width = "100%"
+  } = _ref;
+  // Default data structure if no data provided
+  const defaultStatusData = [{
+    status: "Pending",
+    count: 0,
+    checked: true,
+    color: "#F5C9A7"
+  }, {
+    status: "Received",
+    count: 0,
+    checked: true,
+    color: "#B9D5D5"
+  }, {
+    status: "Approved",
+    count: 0,
+    checked: true,
+    color: "#BEDDC3"
+  }, {
+    status: "Cancelled",
+    count: 0,
+    checked: true,
+    color: "#EBA6AF"
+  }];
+  const displayData = statusData.length > 0 ? statusData : defaultStatusData;
+  const handleCardClick = status => {
+    if (disabled) return;
+    const updatedData = displayData.map(item => item.status === status ? {
+      ...item,
+      checked: !item.checked
+    } : item);
+    const clickedItem = displayData.find(item => item.status === status);
+    onStatusToggle(updatedData, status, !clickedItem.checked);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(CardsContainer, {
+    width: width,
+    className: "EventStatusCardsContainer"
+  }, displayData.map(item => {
+    const {
+      status,
+      count,
+      checked,
+      color
+    } = item;
+    return /*#__PURE__*/React__default["default"].createElement(StatusCard, {
+      key: status,
+      className: `StatusCard StatusCard-${status}`,
+      isSelected: checked,
+      borderColor: color,
+      disabled: disabled,
+      onClick: () => handleCardClick(status),
+      "data-testid": `status-card-${status.toLowerCase()}`
+    }, /*#__PURE__*/React__default["default"].createElement(CardHeader, null, /*#__PURE__*/React__default["default"].createElement(Circle, {
+      color: color
+    }), /*#__PURE__*/React__default["default"].createElement(CardTitle, {
+      isSelected: checked,
+      color: color
+    }, status), /*#__PURE__*/React__default["default"].createElement(Checkmark, {
+      type: "checkbox",
+      checked: checked,
+      readOnly: true
+    })), /*#__PURE__*/React__default["default"].createElement(CardContent, null, /*#__PURE__*/React__default["default"].createElement(StatusCount, {
+      isSelected: checked,
+      color: color
+    }, count)));
+  }));
+};
+EventStatusCards.propTypes = {
+  /** Array of status objects with count, checked state, and color information */
+  statusData: PropTypes.arrayOf(PropTypes.shape({
+    status: PropTypes.oneOf(["Pending", "Received", "Approved", "Cancelled"]).isRequired,
+    count: PropTypes.number.isRequired,
+    checked: PropTypes.bool.isRequired,
+    color: PropTypes.string.isRequired
+  })),
+  /** Callback function when status selection changes */
+  onStatusToggle: PropTypes.func,
+  /** Whether the cards are disabled */
+  disabled: PropTypes.bool,
+  /** Width of the entire cards container */
+  width: PropTypes.string
+};
+
 exports.AreaChart = AreaChart;
 exports.BannerEventBoxList = BannerEventBoxList;
 exports.BarChart = BarChart;
@@ -52345,6 +52506,7 @@ exports.DownloadProgress = DownloadProgress;
 exports.DropdownNew = DropdownNew;
 exports.EventDetailsCard = EventDetailsCard;
 exports.EventList = EventList;
+exports.EventStatusCards = EventStatusCards;
 exports.Execute = Execute;
 exports.FilterPanel = FilterPanel;
 exports.FilterPop = FilterPop;
@@ -52366,6 +52528,7 @@ exports.PerformanceAnalyticsLegend = PerformanceAnalyticsLegend;
 exports.PieChart = PieChart;
 exports.PopupCharts = PopupCharts;
 exports.QuickFilter = QuickFilter;
+exports.RangePicker = RangePicker;
 exports.RangePop = RangePop;
 exports.ReportTable = ReportTable;
 exports.SearchInput = SearchInput;