sag_components 2.0.0-beta127 → 2.0.0-beta129

package/dist/index.esm.js

@@ -54,7 +54,7 @@ const ButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$a = styled.label`
+const Label$b = styled.label`
   font-family: "Poppins";
   font-size: 14px;
   font-weight: 400;
@@ -526,7 +526,7 @@ const Button$1 = props => {
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false),
     borderRadius: borderRadius
-  }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$a, {
+  }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$b, {
     className: "Label",
     disabled: disabled
   }, text), getIcon(rightIcon)));
@@ -2968,7 +2968,7 @@ const LinkButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$9 = styled.label` 
+const Label$a = styled.label` 
   user-select: none;   
   pointer-events: none;
 `;
@@ -3231,7 +3231,7 @@ const LinkButton = _ref => {
     disabled: disabled,
     text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
     font_size: size === 'small' ? '14px' : '16px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$9, {
+  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$a, {
     className: "Label",
     disabled: disabled,
     font_size: size === 'small' ? '14px' : '16px'
@@ -3640,7 +3640,7 @@ const Body = styled.div`
   border-radius: ${props => props.setBackground ? '12px' : '0'};
   box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
 `;
-const Label$8 = styled.div`
+const Label$9 = styled.div`
   font-size: 12px;
   font-weight: 400;
   padding: 8px;
@@ -3891,7 +3891,7 @@ const TabMenu = props => {
     hoverBorderColor: buttonHoverColor
   })), showActions && /*#__PURE__*/React$1.createElement(ActionsWrapper, {
     className: "ActionsWrapper"
-  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$8, {
+  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$9, {
     className: "Label"
   }, /*#__PURE__*/React$1.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React$1.createElement("span", {
     className: "separator"
@@ -8525,7 +8525,7 @@ const DropdownWrapper$2 = styled.div`
     pointer-events: none;
   }
 `;
-const Label$7 = styled.label`
+const Label$8 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -8847,7 +8847,7 @@ const DropdownSingleNew = ({
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$7, {
+  }, /*#__PURE__*/React$1.createElement(Label$8, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -8984,7 +8984,7 @@ const DropdownWrapper$1 = styled.div`
     pointer-events: none;
   }
 `;
-const Label$6 = styled.label`
+const Label$7 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -9355,7 +9355,7 @@ const DropdownMultiNew = ({
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$6, {
+  }, /*#__PURE__*/React$1.createElement(Label$7, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -23787,7 +23787,7 @@ const QuickFilterInput = styled.div`
   font-size: 14px;
   border-radius: 8px;
 `;
-const Label$5 = styled.label`
+const Label$6 = styled.label`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.disabled ? '#D0D0D0' : '212121'};
@@ -24035,7 +24035,7 @@ const QuickFilterDropdownSingle = _ref => {
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$5, {
+  }, /*#__PURE__*/React$1.createElement(Label$6, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -24142,7 +24142,7 @@ const DropdownWrapper = styled.div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label$4 = styled.label`
+const Label$5 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -24499,7 +24499,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$4, {
+  }, /*#__PURE__*/React$1.createElement(Label$5, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -29095,7 +29095,7 @@ const Controls$5 = styled.div`
   display: flex;  
   align-items: center;
 `;
-const Label$3 = styled.div`
+const Label$4 = styled.div`
   display: flex;
   padding: 0 10px 0 10px;
   white-space: nowrap;
@@ -29175,7 +29175,7 @@ const CheckBox = props => {
     width: iconSize,
     height: iconSize,
     color: disabled ? colorDisabled : colorUnchecked
-  })), /*#__PURE__*/React$1.createElement(Label$3, {
+  })), /*#__PURE__*/React$1.createElement(Label$4, {
     className: "Label",
     "data-testid": "label"
   }, label)));
@@ -34339,7 +34339,7 @@ const Modal = styled.div`
   display: flex;
   gap: 20px;
   padding: 20px;
-  margin-top: 40px;
+  margin-top: -30px;
   flex-direction: column;
   background-color: white;
   border-radius: 12px;
@@ -35189,7 +35189,7 @@ const MainContainer = styled.div`
   padding: 0;
   cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
 `;
-const Label$2 = styled.label`
+const Label$3 = styled.label`
 
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
@@ -35411,7 +35411,7 @@ const Input$2 = _ref => {
     error: error,
     onClick: handleLabelClick,
     size: size
-  }, /*#__PURE__*/React$1.createElement(Label$2, {
+  }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -36665,7 +36665,7 @@ const FieldRow$1 = styled.div`
     justify-content: center;
   padding: 16px;
 `;
-const Label$1 = styled.label`
+const Label$2 = styled.label`
     color: #222;
     display: flex;
     align-items: center;
@@ -36755,7 +36755,7 @@ const RangePop = props => {
       e.preventDefault();
       if (isValid) onApply(fields);
     }
-  }, /*#__PURE__*/React$1.createElement(RadioWrapper, null, radioOptions.map((option, idx) => /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React$1.createElement(RadioWrapper, null, radioOptions.map((option, idx) => /*#__PURE__*/React$1.createElement(Label$2, {
     key: option
   }, /*#__PURE__*/React$1.createElement(Radio, {
     type: "radio",
@@ -36768,7 +36768,7 @@ const RangePop = props => {
     }
   }), option))), /*#__PURE__*/React$1.createElement(FieldRow$1, null, params.map((param, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: param.label
-  }, /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React$1.createElement(Label$2, {
     htmlFor: `param-${idx}`
   }, param.label), /*#__PURE__*/React$1.createElement(Input$1, {
     id: `param-${idx}`,
@@ -36779,7 +36779,7 @@ const RangePop = props => {
     onBlur: () => handleBlur(idx),
     min: 0,
     max: param.type === 'percent' ? 100 : undefined
-  }))), /*#__PURE__*/React$1.createElement(Label$1, null, paramType)), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(ClearButton, {
+  }))), /*#__PURE__*/React$1.createElement(Label$2, null, paramType)), /*#__PURE__*/React$1.createElement(Actions$1, null, /*#__PURE__*/React$1.createElement(ClearButton, {
     type: "button",
     onClick: () => {
       setFields(params.map(() => ''));
@@ -37542,94 +37542,170 @@ const TableHeader = ({
 
 // Shared tooltip styles
 const tooltipStyles = css`
-    /* CSS-only tooltip */
-    &[data-tooltip]:hover::before {
-        content: attr(data-tooltip);
-        position: fixed;
-        background-color: white;
-        color: #333;
-        padding: 10px 16px;
-        border-radius: 4px;
-        font-family: 'Poppins', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        z-index: 1000;
-        pointer-events: none;
-        width: 200px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        line-height: 1.8;
-        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
-        
-        /* Position above the element - using dynamic offset */
-        top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px));
-        left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
-        transform: translateX(-50%);
-        
-        /* Add delay */
-        opacity: 0;
-        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  /* CSS-only tooltip */
+  &[data-tooltip]:hover::before {
+    content: attr(data-tooltip);
+    position: fixed;
+    background-color: white;
+    color: #333;
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-family: "Poppins", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    z-index: 1000;
+    pointer-events: none;
+    width: 200px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    line-height: 1.8;
+    box-shadow:
+      0 -2px 8px rgba(0, 0, 0, 0.15),
+      0 2px 8px rgba(0, 0, 0, 0.15);
+
+    /* Position above the element - using dynamic offset */
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px));
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
+    transform: translateX(-50%);
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  /* Tooltip arrow */
+  &[data-tooltip]:hover::after {
+    content: "";
+    position: fixed;
+    top: calc(
+      var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) +
+        var(--tooltip-height, 50px)
+    ); /* Use estimated tooltip height */
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: white;
+    z-index: 1001;
+    pointer-events: none;
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  @keyframes showTooltip {
+    to {
+      opacity: 1;
     }
-    
-    /* Tooltip arrow */
-    &[data-tooltip]:hover::after {
-        content: '';
-        position: fixed;
-        top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + var(--tooltip-height, 50px)); /* Use estimated tooltip height */
-        left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
-        transform: translateX(-50%);
-        border: 8px solid transparent;
-        border-top-color: white;
-        z-index: 1001;
-        pointer-events: none;
-        
-        /* Add delay */
-        opacity: 0;
-        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+`;
+
+// Simple new row highlight animation
+const shimmerAnimation = css`
+  @keyframes newRowHighlight {
+    0% {
+      background-color: #ffffff;
+      border-left-color: transparent;
     }
-    
-    @keyframes showTooltip {
-        to {
-            opacity: 1;
-        }
+    15% {
+      background-color: #f0f8f0;
+      border-left-color: #5fcc70;
+    }
+    85% {
+      background-color: #f0f8f0;
+      border-left-color: #5fcc70;
     }
+    100% {
+      background-color: #ffffff;
+      border-left-color: transparent;
+    }
+  }
 `;
 const StyledTableBody = styled.tbody`
-    background-color: white;
-    font-family: 'Poppins', sans-serif;
-    position: relative;
+  background-color: white;
+  font-family: "Poppins", sans-serif;
+  position: relative;
 `;
 const TableRow = styled.tr`
-    border-bottom: 1px solid #F2F2F2;
-    transition: background-color 0.2s;
-    font-family: 'Poppins', sans-serif;
-    cursor: pointer;
-       
-    &:hover {
-        background-color: #E6F0F0;
-    }
-    
-    /* Focus state - persistent until another row is clicked */
-    ${props => props.$isFocused && css`
-        background-color: #D1E7E7;
-        border-left: 3px solid #066768;
-        
-        &:hover {
-            background-color: #C1D7D7;
-        }
-    `}
-    
-    &:last-child {
-        border-bottom: none;
-    }
+  border-bottom: 1px solid #f2f2f2;
+  transition: all 0.3s ease;
+  font-family: "Poppins", sans-serif;
+  position: relative;
+
+  &:hover {
+    background-color: #e6f0f0;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  /* Simple new row highlight */
+  &.shimmer-row {
+    border-left: 3px solid transparent;
+    animation: newRowHighlight 3s ease-out;
+    animation-fill-mode: both;
+  }
+
+  ${shimmerAnimation}
 `;
 styled.div`
+  position: absolute;
+  background-color: white;
+  color: #333;
+  padding: 10px 16px;
+  border-radius: 4px;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  z-index: 1000;
+  pointer-events: none;
+  width: 200px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.8;
+  box-shadow:
+    0 -2px 8px rgba(0, 0, 0, 0.15),
+    0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: translate(-50%, -100%);
+
+  &::after {
+    content: "";
     position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: white;
+  }
+`;
+const TableCell = styled.td`
+  padding: 12px 16px;
+  color: ${props => props.$color || "#212121"};
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Poppins", sans-serif;
+  line-height: 30px;
+  height: 32px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: ${props => props.$minWidth || "80px"};
+  max-width: ${props => props.$maxWidth || "300px"};
+  width: auto;
+  position: relative;
+  transition: all 0.3s ease;
+
+  /* CSS-only tooltip */
+  &[data-tooltip]:hover::before {
+    content: attr(data-tooltip);
+    position: fixed;
     background-color: white;
     color: #333;
     padding: 10px 16px;
     border-radius: 4px;
-    font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
     font-size: 14px;
     font-weight: 400;
     z-index: 1000;
@@ -37638,201 +37714,157 @@ styled.div`
     white-space: pre-wrap;
     word-wrap: break-word;
     line-height: 1.8;
-    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
-    transform: translate(-50%, -100%);
+    box-shadow:
+      0 -2px 8px rgba(0, 0, 0, 0.15),
+      0 2px 8px rgba(0, 0, 0, 0.15);
 
-    &::after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        border: 8px solid transparent;
-        border-top-color: white;
-    }
-`;
-const TableCell = styled.td`
-    padding: 12px 16px;
-    color: ${props => props.$color || '#212121'};
-    font-size: 14px;
-    font-weight: 400;
-    font-family: 'Poppins', sans-serif;
-    line-height: 30px;
-    height: 32px; // Add this to force consistent height
-    vertical-align: middle; // Add this to center content vertically
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: ${props => props.$minWidth || '80px'};
-    max-width: ${props => props.$maxWidth || '300px'};    
-    width: auto;
-    position: relative;
-    
-    /* CSS-only tooltip */
-    &[data-tooltip]:hover::before {
-        content: attr(data-tooltip);
-        position: fixed;
-        background-color: white;
-        color: #333;
-        padding: 10px 16px;
-        border-radius: 4px;
-        font-family: 'Poppins', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        z-index: 1000;
-        pointer-events: none;
-        width: 200px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        line-height: 1.8;
-        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
-        
-        /* Position above the element - using dynamic offset */
-        top: calc(var(--cell-top, 0px) - var(--cell-offset, 40px));
-        left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
-        transform: translateX(-50%);
-        
-        /* Add delay */
-        opacity: 0;
-        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
-    }
-    
-    /* Tooltip arrow */
-    &[data-tooltip]:hover::after {
-        content: '';
-        position: fixed;
-        top: calc(var(--cell-top, 0px) - var(--cell-offset, 40px) + var(--cell-height, 50px));
-        left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
-        transform: translateX(-50%);
-        border: 8px solid transparent;
-        border-top-color: white;
-        z-index: 1001;
-        pointer-events: none;
-        
-        /* Add delay */
-        opacity: 0;
-        animation: showTooltip 0.3s ease-in-out 0.5s forwards;
-    }
-    
-    &[title] {
-        &:hover::after {
-            font-family: 'Poppins', sans-serif;
-            font-size: 14px;
-        }
+    /* Position above the element - using dynamic offset */
+    top: calc(var(--cell-top, 0px) - var(--cell-offset, 40px));
+    left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
+    transform: translateX(-50%);
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  /* Tooltip arrow */
+  &[data-tooltip]:hover::after {
+    content: "";
+    position: fixed;
+    top: calc(
+      var(--cell-top, 0px) - var(--cell-offset, 40px) + var(--cell-height, 50px)
+    );
+    left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: white;
+    z-index: 1001;
+    pointer-events: none;
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  &[title] {
+    &:hover::after {
+      font-family: "Poppins", sans-serif;
+      font-size: 14px;
     }
-    
-    ${props => {
+  }
+
+  ${props => {
   switch (props.$fieldType) {
-    case 'currency':
+    case "currency":
       return css`
-                    font-family: 'Poppins', sans-serif;
-                    font-weight: 500;
-                `;
-    case 'number':
+          font-family: "Poppins", sans-serif;
+          font-weight: 500;
+        `;
+    case "number":
       return css`
-                    font-family: 'Poppins', sans-serif;
-                    //text-align: right;
-                `;
+          font-family: "Poppins", sans-serif;
+        `;
     default:
-      return '';
+      return "";
   }
 }}
 `;
 
 // Loading skeleton styles
 styled.td`
-    padding: 12px 16px;
-    font-family: 'Poppins', sans-serif;
+  padding: 12px 16px;
+  font-family: "Poppins", sans-serif;
 `;
 styled.div`
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: loading 1.5s infinite;
-    height: 20px;
-    border-radius: 4px;
-    width: ${props => props.$width || '100%'};
-    font-family: 'Poppins', sans-serif;
-    
-    @keyframes loading {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+  height: 20px;
+  border-radius: 4px;
+  width: ${props => props.$width || "100%"};
+  font-family: "Poppins", sans-serif;
+
+  @keyframes loading {
+    0% {
+      background-position: 200% 0;
     }
+    100% {
+      background-position: -200% 0;
+    }
+  }
 `;
 styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 const ButtonWrapper = styled.div`
-    display: inline-block;
-    position: relative;
-    
-    ${tooltipStyles}
+  display: inline-block;
+  position: relative;
+
+  ${tooltipStyles}
 `;
 const SentStatus = styled.div`
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    gap: 8px;
-    color: #5FCC70;
-    //padding: 4px 8px;
-    user-select: none;
-    position: relative;
-    
-    ${tooltipStyles}
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  gap: 8px;
+  color: #5fcc70;
+  user-select: none;
+  position: relative;
+
+  ${tooltipStyles}
 `;
 const TrashIconWrapper = styled.div`
-    cursor: pointer;
-    transition: color 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    //transform: translateY(5px);
-    
-    ${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); 
-    }
-    
-    &:hover {
-        svg path {
-            fill: ${props => props.$buttonColor};
-        }
+  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);
+  }
+
+  &:hover {
+    svg path {
+      fill: ${props => props.$buttonColor};
     }
+  }
 `;
 const DisabledTrashIconWrapper = styled.div`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    //transform: translateY(5px);
-    
-    ${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); 
-    }
-    
-    svg {
-        color: #D9D9D9;
-    }
+  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);
+  }
+
+  svg {
+    color: #d9d9d9;
+  }
 `;
 
 // OkIcon.jsx
@@ -37901,7 +37933,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   buttonColor,
   onDeleteClick,
   resetFocus = false,
-  onFocusChange
+  onFocusChange,
+  indexToShimmer = 0
 }, ref) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
@@ -38135,6 +38168,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   return /*#__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,
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
     onMouseLeave: () => setHoveredRowIndex(null),
@@ -38167,9 +38201,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   }))));
 });
 
-// Add displayName for better debugging
-TableBody.displayName = 'TableBody';
-
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
 var h$1 = 16;
@@ -41369,6 +41400,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     showNoDataInSearch = false,
     noDataInSearchTitle = "No Results Found",
     noDataInSearchMessage = "Try to refine your query and search again",
+    indexToShimmer = -1,
     // New props for focus management
     resetTableFocus = false,
     onTableFocusChange = () => {},
@@ -41469,6 +41501,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
+    indexToShimmer: indexToShimmer,
     data: data,
     onRowClick: onRowClick,
     onSendClick: onSendClick,
@@ -51286,6 +51319,7 @@ const DropdownButton = styled.button`
   border: 1px solid #8B8989;
   border-radius: 12px;
   padding: 17px;
+  height: ${props => props.height};
   text-align: left;
   cursor: pointer;
   display: flex;
@@ -51322,10 +51356,13 @@ const DropdownList = styled.ul`
 const SectionTitle = styled.li`
   font-size: 14px;
   color: #bdbdbd;
-  padding: 16px 12px 0 12px;
+  padding: 12px 12px 0 12px;
   font-weight: 500;
-  border-top: 1px solid #bdbdbd;
   pointer-events: none;
+  &:not(:first-child) {
+    border-top: 1px solid #bdbdbd;
+    padding-top: 16px;
+  }
 `;
 const DropdownItem = styled.li`
   padding: 8px 16px;
@@ -51351,7 +51388,7 @@ const TruncatedText = styled.span`
   line-height: 21px;
   font-size: 14px;
   font-weight: 400;
-  color: inherit;
+  color: ${props => props.color};
   max-width: 340px;
   white-space: nowrap;
   overflow: hidden;
@@ -51373,6 +51410,28 @@ styled.div`
   /* max-width: 320px; */
   white-space: pre-line;
 `;
+const Label$1 = styled.label`
+  font-size: 14px;
+  font-weight: 400;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  margin-right: 10px; 
+  z-index: 2;
+  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};  
+  background-color: ${props => props.disabled ? '#F2F2F2' : props.showLabelOnTop ? 'white' : 'transparent'};
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
+  left: ${props => props.isFocused || props.hasValue ? '23px' : '14px'};
+  transform: translateY(-50%);  
+  transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: 4px;
+  &:hover {
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
 
 const DialogOverlay = styled.div`
   position: fixed;
@@ -51597,6 +51656,13 @@ const OverlayDropdown = _ref => {
     hoverColor = '#E6F0F0',
     dropdownMaxHeight = '600px',
     width = '100%',
+    height = 'auto',
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    placeHolder,
+    labelColor,
+    placeHolderColor,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);
@@ -51667,6 +51733,7 @@ const OverlayDropdown = _ref => {
     return null;
   };
   const selected = findSelectedItem();
+  const hasValue = !!selected;
 
   // Tooltip logic for long string
   const getDisplayText = text => {
@@ -51780,24 +51847,53 @@ const OverlayDropdown = _ref => {
     setOpen(prev => !prev);
   };
   const dataToRender = getDataWithLastDefined();
+  const getLabel = () => {
+    if (!showLabelOnTop && open) {
+      return "";
+    }
+    if (hasValue) {
+      return label;
+    }
+    return labelEmptyValue;
+  };
+  const getRequired = () => {
+    if (!showLabelOnTop && open) {
+      return "";
+    }
+    if (!showLabelOnTop && !label && hasValue) {
+      return "";
+    }
+    if (required) {
+      return /*#__PURE__*/React$1.createElement("span", {
+        style: {
+          color: "red"
+        }
+      }, "*");
+    }
+    return "";
+  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
     width: width,
     ref: containerRef
-  }, /*#__PURE__*/React$1.createElement(DropdownButton, {
+  }, /*#__PURE__*/React$1.createElement(Label$1, {
+    className: "Label",
+    isFocused: open,
+    labelColor: labelColor,
+    hasValue: hasValue,
+    disabled: disabled,
+    showLabelOnTop: showLabelOnTop
+  }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(DropdownButton, {
     ref: buttonRef,
     onClick: toggleDropdown,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
+    height: height,
     type: "button"
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
-    onMouseLeave: () => setHoveredText(null)
-  }, selected ? getDisplayText(selected.label) : 'Choose Overlay', required && /*#__PURE__*/React$1.createElement("span", {
-    style: {
-      color: 'red',
-      marginLeft: '2px'
-    }
-  }, "*")), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+    onMouseLeave: () => setHoveredText(null),
+    color: !selected && open ? placeHolderColor : "inherit"
+  }, selected ? getDisplayText(selected.label) : open ? placeHolder : ''), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"