sag_components 2.0.0-beta176 → 2.0.0-beta178

package/dist/index.esm.js

@@ -10545,24 +10545,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -35400,18 +35399,19 @@ const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
-  width: ${props => props.width || '300px'};  
+  width: ${props => props.width || '300px'};
+  height: ${props => props.height || '45px'};  
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
   padding: 0;
   cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
+  min-height: ${props => props.multiline ? '80px' : 'auto'};
 `;
 const Label$3 = styled.label`
-
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -35421,8 +35421,18 @@ const Label$3 = styled.label`
   color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
+  top: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '0px' : '20px';
+  }
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+}};
+  left: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '23px' : '16px';
+  }
+  return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
+}};
   font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
@@ -35439,17 +35449,17 @@ const InputContainer = styled.div`
   display: flex;       
   flex-wrap: nowrap; 
   justify-content: flex-start;
-  align-content: center;     
+  align-content: ${props => props.multiline ? 'flex-start' : 'center'};     
   white-space: pre-wrap;
-  align-items: center;
+  align-items: ${props => props.multiline ? 'flex-start' : 'center'};
   overflow: hidden;
-  padding: 0 16px;
-  gap: 14px;
+  padding: ${props => props.multiline ? '16px' : '0 16px'};
+  gap: ${props => props.multiline ? '0' : '14px'};
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
-  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+  border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -35461,10 +35471,9 @@ const InputContainer = styled.div`
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 
-  &:focus {  
+  &:focus-within {  
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
-  
 `;
 const InputSubContainer = styled.div`
   display: flex;       
@@ -35472,13 +35481,16 @@ const InputSubContainer = styled.div`
   flex-wrap: nowrap;     
   align-content: center; 
   align-items: flex-start;
-  justify-content: center;
+  justify-content: ${props => props.multiline ? 'flex-start' : 'center'};
   white-space: pre-wrap;
   overflow: hidden;
-  padding: 5px 0;
+  padding: ${props => props.multiline ? '5px 0 0 0' : '5px 0'};
   width: 100%;
-  height: 100%;
-  min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+  height: ${props => props.height || '45px'};
+  min-height: ${props => {
+  if (props.multiline) return 'auto';
+  return props.size === 'medium' ? '52px' : '32px';
+}};
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
@@ -35488,14 +35500,59 @@ const InputSubContainer = styled.div`
 `;
 const StyledInput = styled.input`
   width: calc(100% - 10px);
-  height: 20px;
+  height: ${props => props.height || '20px'};
   font-weight: 400;
   font-size: 14px;
   outline: none;  
   color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+`;
+const StyledTextarea = styled.textarea`
+  width: 100%;
+  min-height: 60px;
+  font-weight: 400;
+  font-size: 14px;
+  outline: none;  
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border: none;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+  resize: vertical;
+  line-height: 1.4;
+  padding: 0;
+  margin-top: 10px;
+  
+  &::placeholder {
+    color: #999;
+    font-style: italic;
+  }
+  
+  &:focus {
+    outline: none;
+  }
+  
+  /* Remove default textarea styling */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
 `;
 const ErrorMessage = styled.div`
   font-size: 12px;
@@ -35528,6 +35585,7 @@ const Input$2 = _ref => {
     disabled,
     isDarkerBackground = false,
     width,
+    height = '50px',
     error,
     errorMessage,
     labelColor,
@@ -35535,7 +35593,12 @@ const Input$2 = _ref => {
     rightIcon,
     password,
     leftIconOnClick,
-    rightIconOnClick
+    rightIconOnClick,
+    multiline = false,
+    // New prop to enable textarea mode
+    rows = 3,
+    // New prop for textarea rows
+    maxLength // New prop for character limit
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35609,12 +35672,24 @@ const Input$2 = _ref => {
     }
     return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
   };
+
+  // Calculate dynamic height for multiline inputs
+  const calculateHeight = () => {
+    if (!multiline) return height;
+    const baseHeight = size === 'small' ? 32 : 52;
+    const lineHeight = 20;
+    const padding = 10;
+    return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
+  };
+  const InputElement = multiline ? StyledTextarea : StyledInput;
   return /*#__PURE__*/React$1.createElement(MainContainer, {
     className: "MainContainer",
     width: width,
+    height: calculateHeight(),
     size: size,
     disabled: disabled,
-    isDarkerBackground: isDarkerBackground
+    isDarkerBackground: isDarkerBackground,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35622,8 +35697,9 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     isFocused: isFocused,
-    size: size
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
+    size: size,
+    multiline: multiline
+  }, !multiline && getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
@@ -35631,26 +35707,29 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     onClick: handleLabelClick,
-    size: size
+    height: calculateHeight(),
+    size: size,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
     hasValue: inputValue,
-    leftIcon: leftIcon,
+    leftIcon: !multiline ? leftIcon : 'none',
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
-    size: size
+    size: size,
+    multiline: multiline
   }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: disabled ? '#D0D0D0' : 'red',
       height: '16px'
     }
-  }, "*")), /*#__PURE__*/React$1.createElement(StyledInput, {
-    className: "StyledInput",
+  }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
+    className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
     type: password && !showPassword ? 'password' : 'text',
     value: inputValue,
@@ -35662,11 +35741,22 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     placeholder: isFocused ? placeHolder : '',
     error: error,
-    isFocused: isFocused
-  })), password ? getPasswordIcon() : getRightIcon()), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
+    height: calculateHeight(),
+    isFocused: isFocused,
+    rows: multiline ? rows : undefined,
+    maxLength: maxLength,
+    multiline: multiline
+  })), !multiline && (password ? getPasswordIcon() : getRightIcon())), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
     className: "ErrorMessage",
     width: width
-  }, errorMessage));
+  }, errorMessage), multiline && maxLength && /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      fontSize: '12px',
+      color: inputValue.length > maxLength * 0.9 ? 'orange' : '#666',
+      textAlign: 'right',
+      marginTop: '4px'
+    }
+  }, inputValue.length, "/", maxLength));
 };
 Input$2.propTypes = {
   placeHolder: PropTypes.string,
@@ -35686,7 +35776,10 @@ Input$2.propTypes = {
   onBlur: PropTypes.func,
   leftIcon: PropTypes.string,
   rightIcon: PropTypes.string,
-  password: PropTypes.bool
+  password: PropTypes.bool,
+  multiline: PropTypes.bool,
+  rows: PropTypes.number,
+  maxLength: PropTypes.number
 };
 Input$2.defaultProps = {
   placeHolder: 'Type...',
@@ -35705,7 +35798,10 @@ Input$2.defaultProps = {
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},
-  password: false
+  password: false,
+  multiline: false,
+  rows: 3,
+  maxLength: undefined
 };
 
 const ToggleSwitchLabel = styled.label`
@@ -35713,12 +35809,9 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 0.5 : 1;
-}};
+  opacity: ${({
+  disabled
+}) => disabled ? 0.5 : 1};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35726,19 +35819,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref2 => {
-  let {
-    checked,
-    disabled
-  } = _ref2;
-  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref3 => {
-  let {
-    size
-  } = _ref3;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35757,10 +35846,9 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35770,11 +35858,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -37757,7 +37844,9 @@ const TableHeader = ({
   onSelectAll,
   activeFilters = [],
   activeSorts = [],
-  expandable = false
+  expandable = false,
+  onHeaderCheckboxClick = () => {},
+  headerCheckboxStates = {}
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -38107,6 +38196,20 @@ const TableHeader = ({
     return isFocused || isActive || hasSelection;
   };
 
+  // Handle header checkbox click
+  const handleHeaderCheckboxClick = (columnKey, event) => {
+    // Don't prevent the default checkbox behavior
+    const newValue = event.target.checked;
+
+    // Fire the callback with column info and new value - let parent handle state
+    if (onHeaderCheckboxClick) {
+      onHeaderCheckboxClick({
+        columnName: columnKey,
+        checked: newValue
+      });
+    }
+  };
+
   // Update showColumnFilter to pass current filterSelections to stateless FilterPop
   const showColumnFilter = column => {
     const {
@@ -38210,7 +38313,24 @@ const TableHeader = ({
     type: "checkbox",
     onChange: e => handleCheckboxChange(column.key, e.target.checked),
     "data-column": column.key
-  }), /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
+  }), column.fieldType?.toLowerCase() === 'checkbox' && column.showCheckboxInTitle !== false && /*#__PURE__*/React$1.createElement(ColumnCheckbox, {
+    type: "checkbox",
+    checked: headerCheckboxStates[column.key] || false,
+    onChange: e => handleHeaderCheckboxClick(column.key, e),
+    "data-column": column.key,
+    style: {
+      width: '18px',
+      height: '18px',
+      marginLeft: '10px',
+      // Moved 5px more to the right (was 5px)
+      cursor: 'pointer',
+      accentColor: '#066768',
+      // Use the same green color as row checkboxes
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }), column.fieldType?.toLowerCase() !== 'checkbox' && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
     onClick: () => handleSort(column.key),
     onMouseEnter: () => setFocusedSort(column.key),
@@ -39186,8 +39306,19 @@ const DropdownButton$1 = styled.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  min-width: 120px;  
-  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? props.$selectedColor : "white"};
+  min-width: 120px;
+  background-color: ${props => {
+  // When row is being hovered (regardless of focus state), use hover color
+  if (props.$isRowHovered) {
+    return props.$selectedColor; // Use selected color for row hover
+  }
+  // Row focused/selected state (only when NOT hovering the row) - should use selected color
+  if (props.$isRowFocused) {
+    return props.$selectedColor; // Use selected color when row is focused/selected
+  }
+  // Default
+  return 'white';
+}};
   border: none;
   border-radius: 0;
   font-family: "Poppins", sans-serif;
@@ -39220,7 +39351,22 @@ const DropdownIcon = styled.div`
   justify-content: center;
   width: 20px;
   height: 20px;
-  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? '#B4D1D2' : 'white'};
+  background-color: ${props => {
+  // Highest Priority: dropdown-specific hover takes precedence over everything
+  if (props.$isDropdownHovered) {
+    return '#B4D1D2'; // Green color when specifically hovering this dropdown
+  }
+  // When row is being hovered (regardless of focus state), other dropdowns should use hover color
+  if (props.$isRowHovered) {
+    return '#E6F0F0'; // Light gray when row is hovered but not this specific dropdown
+  }
+  // Row focused/selected state (only when NOT hovering the row) - should use green color
+  if (props.$isRowFocused) {
+    return '#B4D1D2'; // Green color when row is focused/selected but not being hovered
+  }
+  // Default
+  return 'white';
+}};
   border-radius: 4px;
   margin-left: 8px;
   transition: all 0.2s ease;
@@ -39232,8 +39378,14 @@ const DropdownIcon = styled.div`
 const DropdownMenu = styled.div`
   position: absolute;
   top: calc(100%);
-  left: 0;
-  right: 0;
+  ${props => {
+  if (props.$dropdownOptionsAlignment === 'left') {
+    return props.$dropdownOptionsWidth ? `left: 0; width: ${props.$dropdownOptionsWidth};` : 'left: 0; right: 0;';
+  } else {
+    // Default: right alignment
+    return props.$dropdownOptionsWidth ? `right: 0; width: ${props.$dropdownOptionsWidth};` : 'left: 0; right: 0;';
+  }
+}}
   z-index: 1000;
   background-color: white;
   border: none;
@@ -39302,23 +39454,41 @@ const Dropdown = ({
   maxDropdownHeight,
   isRowFocused = false,
   isRowHovered = false,
-  selectedColor
+  selectedColor,
+  dropdownOptionsWidth,
+  dropdownOptionsAlignment = 'right',
+  placeholder = 'Select...'
 }) => {
-  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
+  const [isDropdownHovered, setIsDropdownHovered] = useState(false);
+
+  // Reset dropdown hover state when dropdown closes
+  useEffect(() => {
+    if (!isOpen) {
+      setIsDropdownHovered(false);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, {
+    onMouseEnter: () => setIsDropdownHovered(true),
+    onMouseLeave: () => setIsDropdownHovered(false)
+  }, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
     onClick: onToggle,
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
+    $isRowHovered: isRowHovered,
     $selectedColor: selectedColor
   }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
-    $isRowHovered: isRowHovered
+    $isRowHovered: isRowHovered,
+    $isDropdownHovered: isDropdownHovered
   }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
     width: "10",
     height: "6",
     color: "#212121"
   }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
-    $maxDropdownHeight: maxDropdownHeight
+    $maxDropdownHeight: maxDropdownHeight,
+    $dropdownOptionsWidth: dropdownOptionsWidth,
+    $dropdownOptionsAlignment: dropdownOptionsAlignment
   }, options.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
     key: index,
     onClick: e => onOptionSelect(option, e),
@@ -39342,7 +39512,10 @@ Dropdown.propTypes = {
   maxDropdownHeight: PropTypes.string,
   isRowFocused: PropTypes.bool,
   isRowHovered: PropTypes.bool,
-  selectedColor: PropTypes.string
+  selectedColor: PropTypes.string,
+  dropdownOptionsWidth: PropTypes.string,
+  dropdownOptionsAlignment: PropTypes.oneOf(['left', 'right']),
+  placeholder: PropTypes.string
 };
 
 // TableBody.jsx
@@ -39381,6 +39554,8 @@ const TableBody = ({
   expandedBackgroundColor = '#E6F0F0',
   // New prop with default
   onDropdownSelected = () => {},
+  onCheckboxClick = () => {},
+  onHeaderCheckboxClick = () => {},
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
@@ -39730,10 +39905,13 @@ const TableBody = ({
         const isOpen = openDropdowns[dropdownKey] || false;
         const dropdownOptions = column.dropdownOptions || [];
         const maxDropdownHeight = column.maxDropdownHeight || '200px';
+        const dropdownOptionsWidth = column.dropdownOptionsWidth; // Get from column config
+        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || 'right'; // Get from column config, default to 'right'
+        const placeholder = column.placeholder || 'Select...'; // Get from column config, default to 'Select...'
 
         // Find the current selected option to display its label
         const currentOption = dropdownOptions.find(option => option.value === value);
-        const displayText = currentOption ? currentOption.label : value || 'Select...';
+        const displayText = currentOption ? currentOption.label : value || placeholder;
         return /*#__PURE__*/React$1.createElement(Dropdown, {
           isOpen: isOpen,
           options: dropdownOptions,
@@ -39742,10 +39920,37 @@ const TableBody = ({
           onToggle: e => handleDropdownClick(rowIndex, column.key, e),
           onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
           maxDropdownHeight: maxDropdownHeight,
+          dropdownOptionsWidth: dropdownOptionsWidth,
+          dropdownOptionsAlignment: dropdownOptionsAlignment,
+          placeholder: placeholder,
           isRowFocused: focusedRowIndex === rowIndex,
           isRowHovered: hoveredRowIndex === rowIndex,
           selectedColor: selectedColor
         });
+      case 'checkbox':
+        const isChecked = Boolean(value); // Convert to boolean
+
+        return /*#__PURE__*/React$1.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%'
+          }
+        }, /*#__PURE__*/React$1.createElement("input", {
+          type: "checkbox",
+          checked: isChecked,
+          onChange: e => handleCheckboxClick(row, column.key, e),
+          onClick: e => e.stopPropagation() // Prevent row click on checkbox click
+          ,
+          style: {
+            width: '18px',
+            height: '18px',
+            cursor: 'pointer',
+            accentColor: buttonColor // Use the theme color for checkbox
+          }
+        }));
       default:
         // Treat default as text
         return value.toString();
@@ -39765,6 +39970,28 @@ const TableBody = ({
     }
   };
 
+  // Handle checkbox click
+  const handleCheckboxClick = (row, columnKey, event) => {
+    event.stopPropagation();
+    const currentValue = row[columnKey];
+    const newValue = !currentValue; // Toggle the value
+
+    // Create updated row with new checkbox value
+    const updatedRow = {
+      ...row,
+      [columnKey]: newValue
+    };
+
+    // Fire the onCheckboxClick event with updated row
+    if (onCheckboxClick) {
+      onCheckboxClick({
+        fullRow: updatedRow,
+        columnName: columnKey,
+        checked: newValue
+      });
+    }
+  };
+
   // Handle dropdown click
   const handleDropdownClick = (rowIndex, columnKey, event) => {
     event.stopPropagation();
@@ -39901,6 +40128,8 @@ TableBody.propTypes = {
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
   onDropdownSelected: PropTypes.func,
+  onCheckboxClick: PropTypes.func,
+  onHeaderCheckboxClick: PropTypes.func,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -43260,6 +43489,9 @@ const Table = props => {
     expandedBackgroundColor = '#E6F0F0',
     // New prop
     onDropdownSelected = () => {},
+    onCheckboxClick = () => {},
+    onHeaderCheckboxClick = () => {},
+    headerCheckboxStates = {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -43386,7 +43618,9 @@ const Table = props => {
     onSort: onSort,
     onFilter: onFilter,
     onSelectAll: onSelectAll,
-    expandable: expandable
+    expandable: expandable,
+    onHeaderCheckboxClick: onHeaderCheckboxClick,
+    headerCheckboxStates: headerCheckboxStates
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
@@ -43407,7 +43641,9 @@ const Table = props => {
     expandedContent: expandedContent,
     onExpandRow: onExpandRow,
     expandedBackgroundColor: expandedBackgroundColor,
-    onDropdownSelected: onDropdownSelected
+    onDropdownSelected: onDropdownSelected,
+    onCheckboxClick: onCheckboxClick,
+    onHeaderCheckboxClick: onHeaderCheckboxClick
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noEventsTitle), /*#__PURE__*/React$1.createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: noEventsButtonIcon,