sag_components 2.0.0-beta140 → 2.0.0-beta142

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
+import React$1, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -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('');
@@ -13068,17 +13070,17 @@ const Modal$1 = styled.div`
     margin: 0 auto;
     ${scrollableStyles$a}
 `;
-const ModalHeader$1 = styled.div`
+const ModalHeader$2 = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody$1 = styled.div`
+const ModalBody$2 = styled.div`
     ${scrollableStyles$a}
     max-height: 80vh;
 `;
-const ModalTitle$2 = styled.h5`
+const ModalTitle$3 = styled.h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
@@ -13110,12 +13112,12 @@ const DialogOverlay$1 = props => {
   };
   return /*#__PURE__*/React.createElement(ModalWrapper$1, {
     className: className
-  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$1, null, /*#__PURE__*/React.createElement(ModalTitle$2, null, title), /*#__PURE__*/React.createElement(ModalClose, {
+  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$2, null, /*#__PURE__*/React.createElement(ModalTitle$3, null, title), /*#__PURE__*/React.createElement(ModalClose, {
     type: "button",
     onClick: closeModal
   }, /*#__PURE__*/React.createElement(CloseXIcon, {
     fill: "white"
-  }))), /*#__PURE__*/React.createElement(ModalBody$1, {
+  }))), /*#__PURE__*/React.createElement(ModalBody$2, {
     id: "modalBody"
   }, children)));
 };
@@ -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('');
@@ -27205,7 +27209,7 @@ const scrollableStyles$6 = `
   }
 `;
 const MainContainer$1 = styled.div``;
-const ModalOverlay$1 = styled.div`
+const ModalOverlay$2 = styled.div`
   position: fixed;
   z-index: 100;
   top: 0;
@@ -27217,7 +27221,7 @@ const ModalOverlay$1 = styled.div`
   justify-content: center;
   align-items: center;
 `;
-const ModalContent$1 = styled.div`  
+const ModalContent$2 = styled.div`  
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-size: 18px;
@@ -27447,10 +27451,10 @@ const PopupCharts = props => {
   }, displayChart(item)));
   return /*#__PURE__*/React$1.createElement(MainContainer$1, {
     id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
+  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$2, {
     id: "ModalOverlay",
     className: "modal-overlay"
-  }, /*#__PURE__*/React$1.createElement(ModalContent$1, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent$2, {
     id: "ModalContent",
     ref: divRef,
     className: "modal-content",
@@ -33803,7 +33807,7 @@ const Overlay$2 = styled.div`
   align-items: center;
   z-index: 999;
 `;
-const ModalContent = styled.div`
+const ModalContent$1 = styled.div`
   position: absolute;
   width: 70%;
   height: 80%;
@@ -33829,7 +33833,7 @@ const Header$3 = styled.div`
     align-items: flex-start;
   }
 `;
-const CloseButton$1 = styled.button`
+const CloseButton$2 = styled.button`
   position: absolute;
   top: -10px;
   right: 0px;
@@ -34026,11 +34030,11 @@ const InsightsCarousel = _ref => {
   const nextIndex = (currentIndex + 1) % totalChildren;
   return /*#__PURE__*/React$1.createElement(Overlay$2, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$3, null, /*#__PURE__*/React$1.createElement(Title$8, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent$1, null, /*#__PURE__*/React$1.createElement(Header$3, null, /*#__PURE__*/React$1.createElement(Title$8, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
-  }), title), /*#__PURE__*/React$1.createElement(CloseButton$1, {
+  }), title), /*#__PURE__*/React$1.createElement(CloseButton$2, {
     onClick: () => onClose?.({
       label: "closeCarousel"
     }),
@@ -34347,7 +34351,7 @@ const Modal = styled.div`
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 `;
-const ModalHeader = styled.div`
+const ModalHeader$1 = styled.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -34355,12 +34359,12 @@ const ModalButtons = styled.div`
   display: flex;
   gap: 10px;
 `;
-const ModalTitle$1 = styled.h3`
+const ModalTitle$2 = styled.h3`
   margin: 0;
   font-size: 24px;
   font-weight: 500;
 `;
-const ModalBody = styled.div`
+const ModalBody$1 = styled.div`
   width: 100%;
   height: 100%;
 `;
@@ -34411,9 +34415,9 @@ const ModalWithOverlay = props => {
       width,
       height
     }
-  }, /*#__PURE__*/React$1.createElement(ModalHeader, {
+  }, /*#__PURE__*/React$1.createElement(ModalHeader$1, {
     className: "modal-header"
-  }, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
+  }, /*#__PURE__*/React$1.createElement(ModalTitle$2, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
     className: "modal-buttons"
   }, showCancelButton && /*#__PURE__*/React$1.createElement(Button$1, {
     size: "medium",
@@ -34460,7 +34464,7 @@ const ModalWithOverlay = props => {
     backgroundColor: okButtonColor,
     hoverBorderColor: okButtonHoverBackgroundColor,
     hoverBackgroundColor: okButtonHoverBackgroundColor
-  })))), /*#__PURE__*/React$1.createElement(ModalBody, {
+  })))), /*#__PURE__*/React$1.createElement(ModalBody$1, {
     className: "modal-body"
   }, children)));
 };
@@ -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;
@@ -37633,6 +38050,7 @@ const TableRow = styled.tr`
   transition: all 0.3s ease;
   font-family: "Poppins", sans-serif;
   position: relative;
+  background-color: ${props => props.isFocused ? props.selectedColor : "white"};
 
   &:hover {
     background-color: #e6f0f0;
@@ -37845,6 +38263,27 @@ const TrashIconWrapper = styled.div`
     }
   }
 `;
+const CommentIconWrapper = styled.div`
+  cursor: pointer;
+  transition: color 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles}
+
+  /* Override tooltip position to move left */
+  &[data-tooltip]:hover::before {
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+
+  &[data-tooltip]:hover::after {
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+`;
 const DisabledTrashIconWrapper = styled.div`
   display: inline-flex;
   align-items: center;
@@ -37869,6 +38308,285 @@ const DisabledTrashIconWrapper = styled.div`
   }
 `;
 
+// CommentModal.styles.js
+const ModalOverlay$1 = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+const ModalContent = styled.div`
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: slideUp 0.3s ease-out;
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  border-bottom: 1px solid #D9D9D9;
+  flex-shrink: 0;
+`;
+const ModalTitle$1 = styled.h5`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #212121;
+  margin: 0;
+`;
+const CloseButton$1 = styled.button`
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: #6b7280;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ModalBody = styled.div`
+  padding: 20px 24px 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const TextareaWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const TextareaLabel = styled.label`
+  position: absolute;
+  font-size: 14px;
+  font-weight: 400;
+  top: -10px;
+  left: 25px;
+  padding: 0 4px;
+  background-color: white;
+  color: ${props => props.color};
+  transition: all 0.2s ease;
+  animation: slideInLabel 0.2s ease-out;
+
+  @keyframes slideInLabel {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const CommentTextarea = styled.textarea`
+  width: 100%;
+  min-height: 120px;
+  max-height: 200px;
+  padding: 12px 16px;
+  outline: none;
+  border: 1px solid ${props => props.$hasValue ? props.color : '#8B8989'};
+  border-radius: 12px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  overflow-y: auto;
+  font-family: "Poppins", sans-serif;
+  resize: none;
+  
+  &:focus {
+    border: 1px solid ${props => props.color};
+  }
+  
+  &::placeholder {
+    color: #9ca3af;
+  }
+  
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+`;
+const CharacterCount = styled.div`
+  margin-top: 8px;
+  font-family: "Poppins", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #6b7280;
+  text-align: right;
+  transition: color 0.2s ease;
+`;
+const ModalBottom = styled.div`
+  padding: 16px 24px;
+  border-top: 1px solid #D9D9D9;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const CommentModal = props => {
+  const {
+    isOpen,
+    onClose,
+    onSave,
+    maxLength = 150,
+    color = "#066768",
+    saveButtonHoverColor = "#388586",
+    initialValue = ''
+  } = props;
+  const [commentText, setCommentText] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasUserInteracted, setHasUserInteracted] = useState(false); // Track if user has started typing
+  const [hasInitialValue, setHasInitialValue] = useState(false); // Track if there was initial text
+
+  // Update comment text when modal opens with initial value
+  useEffect(() => {
+    if (isOpen) {
+      const initialText = initialValue || '';
+      setCommentText(initialText);
+      setHasInitialValue(Boolean(initialText.trim())); // Check if there's actual content
+      setHasUserInteracted(false); // Reset interaction state
+    }
+  }, [isOpen, initialValue]);
+  if (!isOpen) return null;
+  const handleTextChange = e => {
+    const text = e.target.value;
+    if (text.length <= maxLength) {
+      setCommentText(text);
+      if (!hasUserInteracted) {
+        setHasUserInteracted(true); // Mark that user has started interacting
+      }
+    }
+  };
+  const handleOverlayClick = e => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleSave = () => {
+    if (onSave) {
+      onSave(commentText);
+    }
+    // Don't clear the text here - let the parent handle closing
+  };
+  const handleClose = () => {
+    setCommentText('');
+    setHasUserInteracted(false);
+    setHasInitialValue(false);
+    onClose();
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  // Determine if save button should be enabled
+  const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
+  return /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
+    onClick: handleOverlayClick
+  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(ModalHeader, null, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, "Add Comment"), /*#__PURE__*/React$1.createElement(CloseButton$1, {
+    onClick: handleClose
+  }, /*#__PURE__*/React$1.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M18 6L6 18M6 6l12 12",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))), /*#__PURE__*/React$1.createElement(ModalBody, null, /*#__PURE__*/React$1.createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React$1.createElement(TextareaLabel, {
+    color: color
+  }, "Comment"), /*#__PURE__*/React$1.createElement(CommentTextarea, {
+    value: commentText,
+    onChange: handleTextChange,
+    placeholder: "Type a Comment...",
+    maxLength: maxLength,
+    color: color,
+    $hasValue: commentText.length > 0,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }), /*#__PURE__*/React$1.createElement(CharacterCount, null, commentText.length, "/", maxLength))), /*#__PURE__*/React$1.createElement(ModalBottom, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    text: "Cancel",
+    type: "secondary",
+    size: "medium",
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3",
+    onClick: handleClose
+  }), /*#__PURE__*/React$1.createElement(Button$1, {
+    text: "Save",
+    size: "medium",
+    disabled: !isSaveEnabled,
+    hoverTextColor: "#ffffff",
+    disabledTextColor: "#ffffff",
+    borderColor: color,
+    backgroundColor: color,
+    hoverBorderColor: saveButtonHoverColor,
+    hoverBackgroundColor: saveButtonHoverColor,
+    onClick: handleSave
+  }))));
+};
+
 // OkIcon.jsx
 const OkIcon = _ref => {
   let {
@@ -37887,6 +38605,30 @@ const OkIcon = _ref => {
   }));
 };
 
+const CommentIcon = ({
+  width = '15',
+  height = '15',
+  showCircle = false,
+  circleColor = '#066768'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: width,
+  height: height,
+  viewBox: "0 0 15 15",
+  fill: "none"
+}, showCircle ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("path", {
+  d: "M7.41699 1C7.2371 1.41164 7.1112 1.85196 7.04785 2.3125H1.75C1.5094 2.3125 1.31254 2.5094 1.3125 2.75V10.625C1.3125 10.8656 1.50937 11.0625 1.75 11.0625H4.375C5.09961 11.0625 5.6875 11.6513 5.6875 12.376V12.8135L7.66992 11.3252C7.89675 11.1558 8.17284 11.0626 8.45703 11.0625H12.25C12.4906 11.0625 12.6875 10.8656 12.6875 10.625V7.95117C13.148 7.88782 13.5884 7.76288 14 7.58301V10.625C14 11.5903 13.2152 12.376 12.25 12.376H8.45703L5.6875 14.4541L5.68164 14.459L5.54297 14.5635L5.0752 14.9131C4.94395 15.0115 4.76562 15.0279 4.61523 14.9541C4.46515 14.8803 4.37514 14.73 4.375 14.5635V12.376H1.75C0.784766 12.376 0 11.5903 0 10.625V2.75C4.08976e-05 1.78476 0.784791 1 1.75 1H7.41699Z",
+  fill: "#212121"
+}), /*#__PURE__*/React$1.createElement("circle", {
+  cx: "12",
+  cy: "3",
+  r: "3",
+  fill: circleColor
+})) : /*#__PURE__*/React$1.createElement("path", {
+  d: "M4.375 10.0629C5.09961 10.0629 5.6875 10.6509 5.6875 11.3755V11.813L7.66992 10.3254C7.89687 10.1559 8.17305 10.0629 8.45742 10.0629H12.25C12.4906 10.0629 12.6875 9.86605 12.6875 9.62541V1.75008C12.6875 1.50944 12.4906 1.31256 12.25 1.31256H1.75C1.50937 1.31256 1.3125 1.50944 1.3125 1.75008V9.62541C1.3125 9.86605 1.50937 10.0629 1.75 10.0629H4.375ZM5.6875 13.4537L5.68203 13.4592L5.54258 13.5631L5.075 13.9131C4.94375 14.0115 4.76602 14.0279 4.61562 13.9541C4.46523 13.8803 4.375 13.7299 4.375 13.5631V12.9806V12.8056V12.7974V12.688V11.3755H3.0625H1.75C0.784766 11.3755 0 10.5907 0 9.62541V1.75008C0 0.784799 0.784766 0 1.75 0H12.25C13.2152 0 14 0.784799 14 1.75008V9.62541C14 10.5907 13.2152 11.3755 12.25 11.3755H8.45742L5.6875 13.4537Z",
+  fill: "#212121"
+}));
+
 // TrashIcon.jsx
 const TrashIcon = ({
   width = "14",
@@ -37927,27 +38669,31 @@ const DisabledTrashIcon = ({
 };
 
 // TableBody.jsx
-const TableBody = /*#__PURE__*/forwardRef(({
+const TableBody = ({
   columns,
   data,
   onRowClick,
   onSendClick,
   buttonColor,
   onDeleteClick,
+  selectedColor,
   resetFocus = false,
   onFocusChange,
-  indexToShimmer = 0
-}, ref) => {
+  indexToShimmer = 0,
+  onCommentSave = () => {},
+  ref = null
+}) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
+  const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
+  const [currentCommentRow, setCurrentCommentRow] = useState(null); // Track which row is being edited
 
-  // Expose methods to parent components via ref
-  useImperativeHandle(ref, () => ({
-    clearFocus: () => setFocusedRowIndex(null),
-    getFocusedRowIndex: () => focusedRowIndex
-  }));
+  // Expose methods to parent components via ref (if ref is provided)
+  // useImperativeHandle(ref, () => ({
+  //     clearFocus: () => setFocusedRowIndex(null),
+  //     getFocusedRowIndex: () => focusedRowIndex
+  // }), [focusedRowIndex]);
 
-  // Handle resetFocus prop
   useEffect(() => {
     if (resetFocus) {
       setFocusedRowIndex(null);
@@ -37955,11 +38701,11 @@ const TableBody = /*#__PURE__*/forwardRef(({
   }, [resetFocus]);
 
   // Notify parent of focus changes
-  useEffect(() => {
-    if (onFocusChange) {
-      onFocusChange(focusedRowIndex);
-    }
-  }, [focusedRowIndex, onFocusChange]);
+  // useEffect(() => {
+  //     if (onFocusChange) {
+  //         onFocusChange(focusedRowIndex);
+  //     }
+  // }, [focusedRowIndex, onFocusChange]);
 
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
@@ -37969,6 +38715,21 @@ const TableBody = /*#__PURE__*/forwardRef(({
     }
   };
 
+  // Handle comment save
+  const handleCommentSave = commentText => {
+    if (currentCommentRow !== null) {
+      onCommentSave(currentCommentRow, commentText);
+    }
+    setCurrentCommentRow(null);
+    setIsCommentModalOpen(false);
+  };
+
+  // Handle comment modal close
+  const handleCommentModalClose = () => {
+    setCurrentCommentRow(null);
+    setIsCommentModalOpen(false);
+  };
+
   // Function to calculate tooltip height based on text length
   const calculateTooltipOffset = (text, isRegularCell = false) => {
     if (!text) return {
@@ -38104,6 +38865,49 @@ const TableBody = /*#__PURE__*/forwardRef(({
           }), /*#__PURE__*/React$1.createElement("span", null, "All Sent"));
         }
         return value;
+      case 'comments':
+        const commentText = value || '';
+        const hasComments = commentText.trim().length > 0;
+
+        // Truncate tooltip text if longer than 150 characters
+        const commentTooltipText = commentText.length > 150 ? commentText.substring(0, 147) + '...' : commentText;
+        return /*#__PURE__*/React$1.createElement(CommentIconWrapper, {
+          $buttonColor: buttonColor,
+          ref: el => {
+            if (el) {
+              if (hasComments) {
+                // Add tooltip if there are comments
+                const rect = el.getBoundingClientRect();
+                const {
+                  offset,
+                  height
+                } = calculateTooltipOffset(commentTooltipText);
+                el.style.setProperty('--tooltip-top', `${rect.top}px`);
+                el.style.setProperty('--tooltip-left', `${rect.left}px`);
+                el.style.setProperty('--tooltip-width', `${rect.width}px`);
+                el.style.setProperty('--tooltip-offset', `${offset}px`);
+                el.style.setProperty('--tooltip-height', `${height}px`);
+                el.setAttribute('data-tooltip', commentTooltipText);
+              } else {
+                // Remove tooltip if there are no comments
+                el.removeAttribute('data-tooltip');
+                el.style.removeProperty('--tooltip-top');
+                el.style.removeProperty('--tooltip-left');
+                el.style.removeProperty('--tooltip-width');
+                el.style.removeProperty('--tooltip-offset');
+                el.style.removeProperty('--tooltip-height');
+              }
+            }
+          },
+          onClick: e => {
+            e.stopPropagation();
+            setCurrentCommentRow(rowIndex);
+            setIsCommentModalOpen(true);
+          }
+        }, /*#__PURE__*/React$1.createElement(CommentIcon, {
+          showCircle: hasComments,
+          circleColor: "#066768"
+        }));
       case 'trash':
         // Only show trash icon when row is hovered
         if (hoveredRowIndex !== rowIndex) {
@@ -38167,11 +38971,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const shouldShowTooltip = (element, content) => {
     return element && element.scrollWidth > element.clientWidth;
   };
-  return /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
     key: rowIndex,
     "data-row-index": rowIndex,
     className: indexToShimmer === rowIndex ? 'shimmer-row' : '',
-    $isFocused: focusedRowIndex === rowIndex,
+    isFocused: focusedRowIndex === rowIndex,
+    selectedColor: selectedColor,
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
     onMouseLeave: () => setHoveredRowIndex(null),
     onClick: () => handleRowClick(row, rowIndex)
@@ -38200,8 +39005,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
     }, formattedValue);
-  }))));
-});
+  })))), /*#__PURE__*/React$1.createElement(CommentModal, {
+    isOpen: isCommentModalOpen,
+    onClose: handleCommentModalClose,
+    onSave: handleCommentSave,
+    initialValue: currentCommentRow !== null ? data[currentCommentRow]?.Comments || '' : ''
+  }));
+};
 TableBody.propTypes = {
   columns: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
@@ -38211,7 +39021,9 @@ TableBody.propTypes = {
   onDeleteClick: PropTypes.func,
   resetFocus: PropTypes.bool,
   onFocusChange: PropTypes.func,
-  indexToShimmer: PropTypes.number
+  indexToShimmer: PropTypes.number,
+  onCommentSave: PropTypes.func,
+  ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
 
@@ -41382,7 +42194,7 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = /*#__PURE__*/forwardRef((props, ref) => {
+const Table = props => {
   const {
     width = '100%',
     height = 'auto',
@@ -41393,7 +42205,6 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onButtonClick = () => {},
     buttonColor = '#066768',
     buttonHoverColor = '#388586',
-    // Updated props for new table structure
     columns = [],
     onRowClick = () => {},
     onSort,
@@ -41403,6 +42214,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onSideButtonClick = () => {},
     sideButtonColor = '#066768',
     sideButtonHoverColor = '#388586',
+    selectedColor = '#B4D1D2',
     children = null,
     tableBodyHeight = '728px',
     isLoading = false,
@@ -41422,7 +42234,10 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     clearFocusOnOutsideClick = true,
     // NEW: Props for edit mode focus management
     isEditMode = false,
-    editRowIndex = -1
+    editRowIndex = -1,
+    onCommentSave = () => {},
+    // Accept ref as a regular prop
+    ref = null
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
@@ -41441,11 +42256,16 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onTableFocusChange(focusedRowIndex);
   };
 
-  // Expose methods to parent components via ref
+  // Handle comment save - pass through to parent
+  const handleCommentSave = (rowIndex, commentText) => {
+    onCommentSave(rowIndex, commentText);
+  };
+
+  // Expose methods to parent components via ref (if ref is provided)
   useImperativeHandle(ref, () => ({
     clearTableFocus,
     getTableBodyRef: () => tableBodyRef.current
-  }));
+  }), []);
   useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current;
     if (!scrollWrapper || !onLastRowsReached) return;
@@ -41523,9 +42343,11 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     columns: columns,
     indexToShimmer: indexToShimmer,
     data: data,
+    selectedColor: selectedColor,
     onRowClick: onRowClick,
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
+    onCommentSave: handleCommentSave,
     buttonColor: buttonColor,
     resetFocus: resetTableFocus,
     onFocusChange: handleTableFocusChange
@@ -41547,7 +42369,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)))));
-});
+};
 
 // Add displayName for better debugging
 Table.displayName = 'Table';
@@ -52506,5 +53328,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