sag_components 2.0.0-beta142 → 2.0.0-beta143

package/dist/index.esm.js

@@ -38307,6 +38307,21 @@ const DisabledTrashIconWrapper = styled.div`
     color: #d9d9d9;
   }
 `;
+const StatusCell = styled.div`
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: ${props => props.color || "#000"};
+`;
+const StatusCellCircle = styled.div`
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background-color: ${props => props.backgroundColor};
+`;
 
 // CommentModal.styles.js
 const ModalOverlay$1 = styled.div`
@@ -38680,6 +38695,19 @@ const TableBody = ({
   resetFocus = false,
   onFocusChange,
   indexToShimmer = 0,
+  statuses = [{
+    status: 'Pending',
+    palette: ['#F5C9A7', '#8B4513']
+  }, {
+    status: 'Received',
+    palette: ['#B9D5D5', '#2F4F4F']
+  }, {
+    status: 'Approved',
+    palette: ['#BEDDC3', '#2D5016']
+  }, {
+    status: 'Cancelled',
+    palette: ['#EBA6AF', '#8B1538']
+  }],
   onCommentSave = () => {},
   ref = null
 }) => {
@@ -38865,6 +38893,14 @@ const TableBody = ({
           }), /*#__PURE__*/React$1.createElement("span", null, "All Sent"));
         }
         return value;
+      case 'status':
+        const statusObj = statuses.find(status => status.status === value) || {};
+        const [palette0, palette1] = statusObj.palette;
+        return /*#__PURE__*/React$1.createElement(StatusCell, {
+          color: palette1
+        }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
+          backgroundColor: palette0
+        }), /*#__PURE__*/React$1.createElement("span", null, value));
       case 'comments':
         const commentText = value || '';
         const hasComments = commentText.trim().length > 0;