@capillarytech/blaze-ui 0.1.6-alpha.62 → 0.1.6-alpha.64

package/CapIcon/styles.js

@@ -9,33 +9,33 @@ export const IconWrapper = styled.span`
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   
   &.xs {
-    font-size: 12px;
-    width: 12px;
-    height: 12px;
+    font-size: 0.75rem;
+    width: 0.75rem;
+    height: 0.75rem;
   }
   
   &.s {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
   }
   
   &.m {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
+    font-size: 1.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
   }
   
   &.l {
-    font-size: 32px;
-    width: 32px;
-    height: 32px;
+    font-size: 2rem;
+    width: 2rem;
+    height: 2rem;
   }
   
   &.with-text-label {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: ${styledVars.SPACING_08};
   }
 `;
 
@@ -45,8 +45,8 @@ export const BackgroundWrapper = styled.span`
   justify-content: center;
   border-radius: 50%;
   background-color: ${({ bgColor }) => bgColor || styledVars.CAP_G09};
-  width: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
-  height: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
+  width: ${({ size }) => (size === 'xs' ? '1.25rem' : size === 's' ? '1.5rem' : size === 'l' ? '3rem' : '2.25rem')};
+  height: ${({ size }) => (size === 'xs' ? '1.25rem' : size === 's' ? '1.5rem' : size === 'l' ? '3rem' : '2.25rem')};
 `;
 
 export const iconStyles = css`

package/CapInput/styles.js

@@ -46,8 +46,8 @@ export const inputStyles = css`
   /* Size variations */
   &.ant-input-lg,
   &.ant-input-affix-wrapper-lg {
-    font-size: 14px;
-    padding: 10px 12px;
+    font-size: 0.875rem;
+    padding: 0.625rem 0.75rem;
   }
   
   /* TextArea specific */

package/CapLabel/CapLabel.js

@@ -5,45 +5,6 @@ import styled from 'styled-components';
 import { StyledLabelDiv, StyledLabelSpan, labelStyles } from './styles';
 import withStyles from '../utils/withStyles';
 
-const getLabelTypeStyles = (type) => {
-  const types = {
-    label1: { fontSize: '12px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label2: { fontSize: '12px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label3: { fontSize: '12px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
-    label4: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label5: { fontSize: '10px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label6: { fontSize: '12px', color: '#b3bac5', fontWeight: 'normal', lineHeight: 'normal' },
-    label7: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: 'normal' },
-    label8: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label9: { fontSize: '12px', color: '#091e42', lineHeight: '16px', fontWeight: 'normal' },
-    label10: { fontSize: '12px', color: '#ffffff', lineHeight: '16px', fontWeight: 'normal' },
-    label11: { fontSize: '10px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label12: { fontSize: '12px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
-    label13: { fontSize: '10px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
-    label14: { fontSize: '14px', color: '#676e7c', fontWeight: 'normal', lineHeight: 'normal' },
-    label15: { fontSize: '14px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label16: { fontSize: '14px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label17: { fontSize: '16px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label18: { fontSize: '14px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label19: { fontSize: '12px', lineHeight: '16px', fontWeight: 'normal', color: 'rgba(0, 0, 0, 0.87)' },
-    label20: { fontSize: '14px', color: '#2466ea', fontWeight: '500', lineHeight: 'normal' },
-    label21: { fontSize: '12px', color: '#2466ea', fontWeight: 'normal', lineHeight: 'normal' },
-    label22: { fontSize: '24px', color: '#5f6d85', lineHeight: '28px', fontWeight: 'normal' },
-    label23: { fontSize: '14px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
-    label24: { fontSize: '14px', color: '#5e6c84', fontWeight: '400', lineHeight: '20px' },
-    label25: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: '20px' },
-    label26: { fontSize: '10px', color: '#091E42', fontWeight: '400', lineHeight: '12px' },
-    label27: { fontSize: '12px', color: '#2466EA', fontWeight: '500', lineHeight: '16px' },
-    label28: { color: '#FFF', fontSize: '12px', fontWeight: '500', lineHeight: '16px' },
-    label29: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
-    label30: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
-    label31: { fontSize: '12px', color: '#091E42', fontWeight: '400', lineHeight: '16px' },
-    label32: { lineHeight: '20px', fontSize: '14px', color: '#ffffff', fontWeight: '500' },
-    label33: { fontSize: '14px', color: '#2466EA', fontWeight: '500', lineHeight: '20px' },
-  };
-  
-  return types[type] || types.label1;
-};
 
 const CapLabel = ({
   children,
@@ -54,13 +15,11 @@ const CapLabel = ({
   lineHeight,
   ...rest
 }) => {
-  const typeStyles = getLabelTypeStyles(type);
 
   return (
     <StyledLabelDiv
       className={classnames('cap-label', type, className)}
       style={style}
-      typeStyles={typeStyles}
       fontWeight={fontWeight}
       lineHeight={lineHeight}
       {...rest}
@@ -87,13 +46,11 @@ CapLabel.defaultProps = {
 
 // Static method for inline label
 const CapLabelInline = styled(({ children, type = 'label1', className = '', style = {}, fontWeight, lineHeight, ...rest }) => {
-  const typeStyles = getLabelTypeStyles(type);
   
   return (
     <StyledLabelSpan
       className={classnames('cap-label', type, className)}
       style={style}
-      typeStyles={typeStyles}
       fontWeight={fontWeight}
       lineHeight={lineHeight}
       {...rest}

package/CapLabel/styles.js

@@ -3,8 +3,8 @@ import * as styledVars from '../styled/variables';
 
 export const StyledLabelDiv = styled.div`
   font-family: ${styledVars.FONT_FAMILY};
-  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
-  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
+  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.75rem'};
+  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
   line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
   margin: 0;
@@ -13,8 +13,8 @@ export const StyledLabelDiv = styled.div`
 
 export const StyledLabelSpan = styled.span`
   font-family: ${styledVars.FONT_FAMILY};
-  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
-  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
+  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.75rem'};
+  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
   color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
   line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
   margin: 0;
@@ -26,234 +26,234 @@ export const labelStyles = css`
     font-family: ${styledVars.FONT_FAMILY};
     
     &.label1 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G04};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label2 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G01};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label3 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G05};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label4 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label5 {
-      font-size: 10px;
+      font-size: 0.625rem;
       color: ${styledVars.CAP_G01};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label6 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G06};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label7 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G04};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label8 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label9 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G01};
-      line-height: 16px;
-      font-weight: normal;
+      line-height: 1rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
     }
     
     &.label10 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_WHITE};
-      line-height: 16px;
-      font-weight: normal;
+      line-height: 1rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
     }
     
     &.label11 {
-      font-size: 10px;
+      font-size: 0.625rem;
       color: ${styledVars.CAP_G04};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label12 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_WHITE};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label13 {
-      font-size: 10px;
+      font-size: 0.625rem;
       color: ${styledVars.CAP_G05};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label14 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: #676e7c;
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label15 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G01};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label16 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label17 {
-      font-size: 16px;
+      font-size: 1rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label18 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G04};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label19 {
-      font-size: 12px;
-      line-height: 16px;
-      font-weight: normal;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       color: rgba(0, 0, 0, 0.87);
     }
     
     &.label20 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_BLUE01};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
       line-height: normal;
     }
     
     &.label21 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_BLUE01};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label22 {
-      font-size: 24px;
+      font-size: 1.5rem;
       color: ${styledVars.CAP_G04};
-      line-height: 28px;
-      font-weight: normal;
+      line-height: 1.75rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
     }
     
     &.label23 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_WHITE};
-      font-weight: normal;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       line-height: normal;
     }
     
     &.label24 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G04};
-      font-weight: 400;
-      line-height: 20px;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 1.25rem;
     }
     
     &.label25 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_G04};
-      font-weight: 500;
-      line-height: 20px;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      line-height: 1.25rem;
     }
     
     &.label26 {
-      font-size: 10px;
+      font-size: 0.625rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 400;
-      line-height: 12px;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 0.75rem;
     }
     
     &.label27 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_BLUE01};
-      font-weight: 500;
-      line-height: 16px;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      line-height: 1rem;
     }
     
     &.label28 {
       color: ${styledVars.CAP_WHITE};
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 16px;
+      font-size: 0.75rem;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      line-height: 1rem;
     }
     
     &.label29 {
       color: ${styledVars.CAP_WHITE};
-      font-size: 10px;
-      font-weight: 400;
-      line-height: 12px;
+      font-size: 0.625rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 0.75rem;
     }
     
     &.label30 {
       color: ${styledVars.CAP_WHITE};
-      font-size: 10px;
-      font-weight: 400;
-      line-height: 12px;
+      font-size: 0.625rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 0.75rem;
     }
     
     &.label31 {
-      font-size: 12px;
+      font-size: 0.75rem;
       color: ${styledVars.CAP_G01};
-      font-weight: 400;
-      line-height: 16px;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 1rem;
     }
     
     &.label32 {
-      line-height: 20px;
-      font-size: 14px;
+      line-height: 1.25rem;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_WHITE};
-      font-weight: 500;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
     }
     
     &.label33 {
-      font-size: 14px;
+      font-size: 0.875rem;
       color: ${styledVars.CAP_BLUE01};
-      font-weight: 500;
-      line-height: 20px;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      line-height: 1.25rem;
     }
   }
 `;

package/CapTable/styles.js

@@ -16,7 +16,7 @@ const {
 export const StyledTable = styled(Table)`
   &.cap-table-v2 {
     .ant-table {
-      border: 1px solid ${CAP_G07};
+      border: 0.0625rem solid ${CAP_G07};
     }
   }
 
@@ -28,16 +28,16 @@ export const StyledTable = styled(Table)`
       position: absolute;
       width: 100%;
       align-items: center;
-      height: 60px;
+      height: 3.75rem;
       text-align: center;
-      font-size: 16px;
+      font-size: 1rem;
       color: gray;
-      border-top: 1px solid ${CAP_G07};
+      border-top: 0.0625rem solid ${CAP_G07};
     }
   }
 
   .ant-table {
-    border: 1px solid ${CAP_G07};
+    border: 0.0625rem solid ${CAP_G07};
 
     .ant-table-thead > tr > th {
       color: ${CAP_G01};
@@ -53,7 +53,7 @@ export const StyledTable = styled(Table)`
     }
 
     .ant-table-tbody > tr > td {
-      border-bottom: 1px solid ${CAP_G07};
+      border-bottom: 0.0625rem solid ${CAP_G07};
     }
 
     .ant-table-tbody > tr:last-child > td {
@@ -79,7 +79,7 @@ export const StyledTable = styled(Table)`
 
     .ant-table-thead {
       .table-children {
-        padding: 6px ${SPACING_24} 16px;
+        padding: 0.375rem ${SPACING_24} 1rem;
         position: relative;
       }
 
@@ -90,8 +90,8 @@ export const StyledTable = styled(Table)`
 
       .table-children.show-separator:not(:last-child)::after {
         content: '';
-        height: 8px;
-        width: 1px;
+        height: 0.5rem;
+        width: 0.0625rem;
         right: 0;
         top: 30%;
         background-color: ${CAP_G07};

package/CapTooltip/CapTooltip.js

@@ -13,21 +13,21 @@ const StyledTooltip = styled(Tooltip)`
 const CapTooltip = ({
   title,
   children,
-  placement = 'top',
+  placement,
   visible,
-  defaultVisible = false,
-  trigger = 'hover',
-  destroyTooltipOnHide = false,
-  mouseEnterDelay = 0.1,
-  mouseLeaveDelay = 0.1,
-  overlayClassName = '',
+  defaultVisible,
+  trigger,
+  destroyTooltipOnHide,
+  mouseEnterDelay,
+  mouseLeaveDelay,
+  overlayClassName,
   overlayStyle,
   onVisibleChange,
   align,
-  arrowPointAtCenter = false,
-  autoAdjustOverflow = true,
+  arrowPointAtCenter,
+  autoAdjustOverflow,
   getPopupContainer,
-  className = '',
+  className,
   ...rest
 }) => {
   return (

package/CapTooltip/styles.js

@@ -6,11 +6,11 @@ export const tooltipStyles = css`
     .ant-tooltip-inner {
       background-color: ${styledVars.CAP_G01};
       color: ${styledVars.CAP_WHITE};
-      padding: 8px 12px;
-      font-size: 14px;
-      line-height: 20px;
+      padding: ${styledVars.SPACING_08} ${styledVars.SPACING_12};
+      font-size: 0.875rem;
+      line-height: 1.25rem;
       border-radius: ${styledVars.RADIUS_04};
-      max-width: 300px;
+      max-width: 18.75rem;
       word-wrap: break-word;
     }
 

package/CapTooltipWithInfo/styles.js

@@ -9,7 +9,7 @@ export const tooltipWithInfoStyles = css`
     
     .cap-tooltip-with-info-icon {
       color: ${styledVars.CAP_G06};
-      margin-left: 4px;
+      margin-left: ${styledVars.SPACING_04};
       cursor: help;
       
       &:hover {

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -29,7 +29,7 @@ const NoResult = memo(({ noResultCustomText, className, showUpload, options, noR
 ));
 
 const SelectAllCheckbox = memo(({ currentItems, tempValue, setTempValue, processTreeData }) => {
-  const { leafValues } = processTreeData(currentItems);
+  const { leafValues = [] } = processTreeData ? processTreeData(currentItems) : {};
   const totalAvailable = leafValues.length;
   const leafSet = new Set(leafValues);
   const selectedInScope = Array.isArray(tempValue)
@@ -76,10 +76,10 @@ const buildTreeMaps = (nodes) => {
   if (!nodes) return result;
 
   const traverse = (items) => {
-    items.forEach((item) => {
+    items?.forEach((item) => {
       result.nodeMap[item.value] = item;
-      if (item.children && item.children.length > 0) {
-        result.parentChildMap[item.value] = item.children.map(child => child.value);
+      if (item?.children && item.children.length > 0) {
+        result.parentChildMap[item.value] = item.children.map(child => child?.value);
         traverse(item.children);
       } else {
         result.leafValues.push(item.value);
@@ -91,18 +91,18 @@ const buildTreeMaps = (nodes) => {
 };
 
 const countSelectedLeaves = (treeMaps, selectedValues) => {
-  if (!Array.isArray(selectedValues) || !selectedValues.length) return 0;
+  if (!Array.isArray(selectedValues) || !selectedValues?.length) return 0;
   const expandedSet = new Set(selectedValues);
   const processNode = (value) => {
-    const children = treeMaps.parentChildMap[value];
+    const children = treeMaps?.parentChildMap?.[value];
     if (!children) return;
-    children.forEach(childValue => {
+    children?.forEach(childValue => {
       expandedSet.add(childValue);
       processNode(childValue);
     });
   };
-  selectedValues.forEach(processNode);
-  return treeMaps.leafValues.reduce((count, leaf) => expandedSet.has(leaf) ? count + 1 : count, 0);
+  selectedValues?.forEach(processNode);
+  return treeMaps?.leafValues?.reduce((count, leaf) => expandedSet.has(leaf) ? count + 1 : count, 0) || 0;
 };
 
 const filterTreeData = (data, search, searchBasedOn) => {
@@ -110,16 +110,16 @@ const filterTreeData = (data, search, searchBasedOn) => {
   const searchLower = search.toLowerCase();
   const nodeMatchesSearch = (node) => {
     const target = searchBasedOn === 'value'
-      ? String(node.value ?? '')
+      ? String(node?.value ?? '')
       : searchBasedOn === 'key'
-        ? String(node.key ?? '')
-        : String(node.label ?? node.title ?? '');
+        ? String(node?.key ?? '')
+        : String(node?.label ?? node?.title ?? '');
     return target.toLowerCase().includes(searchLower);
   };
   const loop = (items) =>
     items.reduce((acc, item) => {
       if (!item) return acc;
-      const children = item.children?.length ? loop(item.children) : [];
+      const children = item?.children?.length ? loop(item.children) : [];
       if (nodeMatchesSearch(item) || children.length) {
         acc.push({ ...item, children });
       }
@@ -133,27 +133,27 @@ const CapUnifiedSelect = ({
   options = [],
   value,
   onChange,
-  placeholder = 'Select an option',
+  placeholder,
   className,
   style,
-  isError = false,
+  isError,
   errorMessage,
   containerClassName,
   popoverClassName,
-  allowClear = false,
+  allowClear,
   headerLabel,
   onUpload,
   tooltip,
   bylineText,
-  disabled = false,
-  showUpload = false,
-  customPopupRender = true,
-  showSearch = true,
-  searchBasedOn = 'label',
+  disabled,
+  showUpload,
+  customPopupRender,
+  showSearch,
+  searchBasedOn,
   onConfirm,
   clearText,
-  noResultCustomText = 'No results found',
-  noResultCustomIcon = 'warning',
+  noResultCustomText,
+  noResultCustomIcon,
   ...rest
 }) => {
   const [searchText, setSearchText] = useState('');
@@ -162,7 +162,7 @@ const CapUnifiedSelect = ({
 
   useEffect(() => {
     const isEqual = Array.isArray(value) && Array.isArray(tempValue)
-      ? value.length === tempValue.length && value.every((v) => tempValue.includes(v))
+      ? value?.length === tempValue?.length && value.every((v) => tempValue.includes(v))
       : value === tempValue;
     if (!isEqual) setTempValue(value);
   }, [value]);
@@ -172,13 +172,39 @@ const CapUnifiedSelect = ({
 
   const dataSource = useMemo(() => {
     if (!options?.length) return [];
-    return isTree
-      ? options
-      : options.map((opt) => ({
-          title: opt?.label,
-          value: opt?.value,
-          key: opt?.key || opt?.value,
-        }));
+    const enhanceOptions = (opts) =>
+      opts.map((opt) => {
+        const decoratedTitle = (
+          <CapRow className="cap-unified-select-option-with-suffix">
+            <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
+            {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
+              {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
+            </div>}
+            {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
+          </CapRow>
+        );
+
+        return {
+          ...opt,
+          title: decoratedTitle,
+          label: opt?.label,
+          children: opt?.children ? enhanceOptions(opt.children) : [],
+        };
+      });
+
+    return isTree ? enhanceOptions(options) : options.map((opt) => ({
+      ...opt,
+      title: (
+        <CapRow className="cap-unified-select-option-with-suffix">
+          <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
+          {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
+            {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
+          </div>}
+          {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
+        </CapRow>
+      ),
+      label: opt?.label,
+    }));
   }, [isTree, options]);
 
   const filteredTree = useMemo(
@@ -192,7 +218,7 @@ const CapUnifiedSelect = ({
   const displayValue = dropdownOpen ? tempValue : value;
 
   const suffix = useMemo(() => {
-    const count = Array.isArray(displayValue) ? displayValue.length : (displayValue ? 1 : 0);
+    const count = Array.isArray(displayValue) ? displayValue?.length : (displayValue ? 1 : 0);
     return (
       <>
         {isMulti && count > 1 && <span>+{count - 1} more </span>}
@@ -206,9 +232,9 @@ const CapUnifiedSelect = ({
   }, [isMulti, displayValue, dropdownOpen]);
 
   const prefix = useMemo(() => {
-    if (isMulti && Array.isArray(displayValue) && displayValue.length > 0) {
-      const firstLeafValue = displayValue.find(val => treeMaps.leafValues.includes(val));
-      return treeMaps.nodeMap[firstLeafValue]?.label || treeMaps.nodeMap[firstLeafValue]?.title || null;
+    if (isMulti && Array.isArray(displayValue) && displayValue?.length > 0) {
+      const firstLeafValue = displayValue.find(val => treeMaps?.leafValues?.includes(val));
+      return treeMaps?.nodeMap?.[firstLeafValue]?.label || null;
     }
     return null;
   }, [isMulti, displayValue, treeMaps]);
@@ -221,10 +247,11 @@ const CapUnifiedSelect = ({
   }, [onChange, onConfirm, tempValue]);
 
   const handleClearAll = useCallback(() => {
-    setTempValue([]);
-    onChange?.([]);
+    const cleared = isMulti ? [] : undefined;
+    setTempValue(cleared);
+    onChange?.(cleared);
     setDropdownOpen(false);
-  }, [onChange]);
+  }, [isMulti, onChange]);
   
 
   const handleDropdownVisibilityChange = useCallback((open) => {
@@ -335,7 +362,7 @@ const CapUnifiedSelect = ({
                   size="small"
                   onClick={handleClearAll}
                 >
-                  Clear all
+                  {clearText}
                 </Button>
                 <CapLabel className="cap-unified-select-selected-count">
                   {selectedLeafCount} selected
@@ -345,8 +372,8 @@ const CapUnifiedSelect = ({
           )}
 
           {(type === 'select' || type === 'treeSelect') && (
-            <CapRow className="cap-unified-select-tree-clear-container">
-              <CapLabel className="cap-unified-select-tree-clear-label" onClick={handleClearAll}>{clearText}</CapLabel>
+            <CapRow className="cap-unified-select-tree-clear-container" onClick={handleClearAll}>
+              <CapLabel className="cap-unified-select-tree-clear-label">{clearText}</CapLabel>
             </CapRow>
           )}
         </div>
@@ -384,6 +411,7 @@ const CapUnifiedSelect = ({
         type={type}
         treeData={filteredTree}
         value={customPopupRender ? tempValue : value}
+        treeNodeLabelProp='label'
         onChange={isMulti ? setTempValue : onChange}
         placeholder={placeholder}
         showSearch={false}
@@ -425,6 +453,7 @@ CapUnifiedSelect.propTypes = {
   type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
   options: PropTypes.array,
   value: PropTypes.any,
+  containerClassName: PropTypes.string,
   onChange: PropTypes.func,
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
@@ -433,16 +462,19 @@ CapUnifiedSelect.propTypes = {
   headerLabel: PropTypes.string,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
+  bylineText: PropTypes.string,
   customPopupRender: PropTypes.bool,
   showSearch: PropTypes.bool,
   searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
   onConfirm: PropTypes.func,
   isError: PropTypes.bool,
   errorMessage: PropTypes.string,
-  popupClassName: PropTypes.string,
+  popoverClassName: PropTypes.string,
   showUpload: PropTypes.bool,
   onUpload: PropTypes.func,
   clearText: PropTypes.string,
+  noResultCustomText: PropTypes.string,
+  noResultCustomIcon: PropTypes.string,
 };
 
 CapUnifiedSelect.defaultProps = {
@@ -457,14 +489,12 @@ CapUnifiedSelect.defaultProps = {
   customPopupRender: true,
   showSearch: true,
   className: '',
-  popupClassName: '',
   disabled: false,
   showUpload: false,
   isError: false,
   onUpload: () => {},
   onChange: () => {},
   onConfirm: () => {},
-  onCancel: () => {},
 };
 
 export default withMemo(withStyles(CapUnifiedSelect, selectStyles));

package/CapUnifiedSelect/styles.js

@@ -4,7 +4,7 @@ import * as styledVars from '../styled/variables';
 export const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: ${styledVars.SPACING_04};
 
   &.disabled {
     opacity: 0.5;
@@ -25,7 +25,7 @@ export const selectStyles = css`
       &:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
         &:hover {
           .ant-select-selector {
-            border-color: #7A869A;
+            border-color: ${styledVars.CAP_G11};
           }
         }
       }
@@ -34,54 +34,53 @@ export const selectStyles = css`
       pointer-events: unset;
     }
     .ant-select-prefix {
-      font-size: 14px;
-      font-weight: 400;
-      color: #091e42;
-      line-height: 20px;
+      font-size: 0.875rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      color: ${styledVars.CAP_G01};
+      line-height: 1.25rem;
     }
     .cap-unified-select-header-label {
       font-family: ${styledVars.FONT_FAMILY};
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0px;
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      letter-spacing: 0;
     }
     .cap-unified-select-header-byline-text {
       font-family: ${styledVars.FONT_FAMILY};
-      font-weight: 400;
-      font-size: 12px;
-      margin-top: -5px;
-      letter-spacing: 0px;
-      color: #97a0af;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      font-size: 0.75rem;
+      letter-spacing: 0;
+      color: ${styledVars.CAP_G05};
     }
     .ant-input-affix-wrapper .ant-input-prefix {
-      left: 12px;
+      left: ${styledVars.SPACING_12};
     }
     .cap-tooltip-with-info-icon {
-      margin-top: 2px;
+      margin-top: 0.125rem;
     }
 
     .cap-unified-tree-select {
-      min-width: 200px;
+      min-width: 12.5rem;
     }
     
     .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
     .ant-select-selector {
-      border-color: #7a869a !important;
+      border-color: ${styledVars.CAP_G11} !important;
       box-shadow: none;
       outline: 0;
     }
     
     .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
-      background-color: #42b040;
+      background-color: ${styledVars.CAP_PRIMARY.base};
     }
     .ant-select-dropdown {
-      margin-top: -8px !important;
-      border-radius: 4px;
+      margin-top: -0.5rem !important;
+      border-radius: ${styledVars.RADIUS_04};
       box-shadow:
-      0px 4px 8px -2px #091e4240,
-      0px 0px 1px 0px #091e424f;
-      max-height: 360px;
+      0 0.25rem 0.5rem -0.125rem ${styledVars.CAP_G01},
+      0 0 0.0625rem 0 ${styledVars.CAP_G01};
+      max-height: 22.5rem;
       overflow: visible;
     }
     
@@ -92,13 +91,13 @@ export const selectStyles = css`
       align-self: center;
     }
     .cap-unified-tree-select .ant-select-selector:focus {
-      border: 1px solid #7a869a;
+      border: 0.0625rem solid ${styledVars.CAP_G11};
     }
     .cap-unified-tree-select .ant-select-tree-treenode {
-      padding-left: 4px;
+      padding-left: ${styledVars.SPACING_04};
     }
     .cap-unified-select-status {
-      color: #e83135;
+      color: ${styledVars.CAP_RED};
     }
   }
 
@@ -109,18 +108,45 @@ export const selectStyles = css`
     .ant-select-tree {
       .ant-select-tree-node-content-wrapper {
         background-color: transparent;
+        height: 100%;
+        .cap-unified-select-option-with-suffix{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          .cap-unified-select-option-label{
+            flex: 1;
+            max-width: 8.125rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+          }
+          .cap-unified-select-option-suffix{
+            display: flex;
+            align-items: center;
+            padding: 0 ${styledVars.SPACING_08};
+            max-height: 1.25rem;
+            white-space: nowrap;
+            margin-left: ${styledVars.SPACING_08};
+          }
+          .cap-tooltip-with-info-icon{
+            margin-top: 0.3125rem;
+          }
+        }
       }
       .ant-select-tree-node-content-wrapper:hover {
         background-color: transparent;
       }
       .ant-select-tree-treenode {
-        line-height: 40px;
-        margin-bottom: 0px;
+        height: 3rem;
+        margin-bottom: 0;
         .ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
-          height: 18px;
-          width: 18px;
-          border: 2px solid #b3bac5;
-          border-radius: 4px;
+          height: 1.125rem;
+          width: 1.125rem;
+          border: 0.125rem solid ${styledVars.CAP_G06};
+          border-radius: ${styledVars.RADIUS_04};
         }
         &:hover {
           background-color: #fffbe6;
@@ -131,11 +157,11 @@ export const selectStyles = css`
         }
       }
       .ant-select-tree-node-content-wrapper {
-        border-radius: 0px;
-        padding-left: 3px;
+        border-radius: 0;
+        padding-left: 0.1875rem;
       }
       .ant-select-tree-indent {
-        margin-left: 12px;
+        margin-left: ${styledVars.SPACING_12};
       }
       .ant-select-tree-switcher:not(
           .ant-select-tree-switcher-noop
@@ -143,21 +169,22 @@ export const selectStyles = css`
         background-color: transparent;
       }
       .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
-        background-color: #42b040;
-        border: 2px solid #42b040 !important;
+        background-color: ${styledVars.CAP_PRIMARY.base};
+        border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
         &:hover {
-          background-color: #42b040;
-          border: 2px solid #42b040 !important;
+          background-color: ${styledVars.CAP_PRIMARY.base};
+          border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
         }
       }
       .ant-select-tree-switcher .ant-select-tree-switcher-icon {
-        font-size: 12px;
+        font-size: 0.75rem;
+        margin-top: 1.125rem;
       }
     }
     .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
       .ant-select-tree-checkbox-inner {
-      background-color: #42b040 !important;
-      border-color: #42b040 !important;
+      background-color: ${styledVars.CAP_PRIMARY.base} !important;
+      border-color: ${styledVars.CAP_PRIMARY.base} !important;
     }
 
     .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
@@ -166,65 +193,65 @@ export const selectStyles = css`
       position: absolute;
       top: 50%;
       left: 50%;
-      width: 10px;
-      height: 2px;
-      background-color: #fff;
+      width: 0.625rem;
+      height: 0.125rem;
+      background-color: ${styledVars.CAP_WHITE};
       transform: translate(-50%, -50%);
-      border-radius: 1px;
+      border-radius: 0.0625rem;
     }
     .cap-unified-select-upload-container {
       cursor: pointer;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #f0f0f0;
-      height: 40px;
-      padding-left: 16px;
+      border-bottom: 0.0625rem solid ${styledVars.CAP_G08};
+      height: 2.5rem;
+      padding-left: ${styledVars.SPACING_16};
 
       .cap-unified-select-upload-label {
-        margin-left: 12px;
-        color: #2466ea;
+        margin-left: ${styledVars.SPACING_12};
+        color: ${styledVars.CAP_SECONDARY.base};
       }
     }
     .cap-unified-select-select-all-container {
-      padding: 9px 15px;
+      padding: 0.5625rem 0.9375rem;
       cursor: pointer;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid #f0f0f0;
-      height: 40px;
+      border-bottom: 0.0625rem solid ${styledVars.CAP_G08};
+      height: 2.5rem;
       .cap-unified-select-select-all-checkbox {
         display: contents !important;
         .ant-checkbox-inner {
-          height: 18px;
-          width: 18px;
-          border: 2px solid #b3bac5;
-          border-radius: 4px;
+          height: 1.125rem;
+          width: 1.125rem;
+          border: 0.125rem solid ${styledVars.CAP_G06};
+          border-radius: ${styledVars.RADIUS_04};
         }
       }
       .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
         .ant-checkbox-checked:not(.ant-checkbox-disabled)
         .ant-checkbox-inner {
-        background-color: #42b040;
-        border: 2px solid #42b040 !important;
+        background-color: ${styledVars.CAP_PRIMARY.base};
+        border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
       }
       .ant-checkbox-indeterminate .ant-checkbox-inner {
-        background-color: #42b040 !important;
-        border-color: #42b040 !important;
+        background-color: ${styledVars.CAP_PRIMARY.base} !important;
+        border-color: ${styledVars.CAP_PRIMARY.base} !important;
       }
       .ant-checkbox-indeterminate .ant-checkbox-inner::after {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
-        width: 10px;
-        height: 2px;
-        background-color: #fff;
+        width: 0.625rem;
+        height: 0.125rem;
+        background-color: ${styledVars.CAP_WHITE};
         transform: translate(-50%, -50%);
-        border-radius: 1px;
+        border-radius: 0.0625rem;
       }
     }
     .ant-select-tree-treenode.ant-select-tree-treenode-selected {
-      background-color: #e9f0fe;
+      background-color: ${styledVars.CAP_PALE_GREY};
     }
     .ant-select-tree-list-holder-inner {
       width: fit-content !important;
@@ -235,84 +262,84 @@ export const selectStyles = css`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 200px;
-      color: #8c8c8c;
-      font-size: 14px;
+      height: 12.5rem;
+      color: ${styledVars.CAP_G05};
+      font-size: 0.875rem;
     }
     .cap-unified-select-no-result-icon {
-      font-size: 36px;
-      margin-bottom: 8px;
-      color: #bfbfbf;
+      font-size: 2.25rem;
+      margin-bottom: ${styledVars.SPACING_08};
+      color: ${styledVars.CAP_G06};
     }
     .cap-unified-select-no-result-text {
       font-weight: 500;
     }
     .ant-tree-select:hover .ant-select-selector {
-      border-color: #7a869a;
+      border-color: ${styledVars.CAP_G11};
     }
     .ant-tree-select-focused .ant-select-selector,
     .ant-tree-select-open .ant-select-selector {
-      border-color: #7a869a;
+      border-color: ${styledVars.CAP_G11};
       box-shadow: none;
       outline: none;
     }
     .cap-unified-select-search-container {
-      border-bottom: 1px solid #ebecf0 !important;
-      line-height: 40px !important;
+      border-bottom: 0.0625rem solid ${styledVars.CAP_G08} !important;
+      line-height: 2.5rem !important;
       .ant-input-affix-wrapper {
-        padding-left: 8px;
+        padding-left: ${styledVars.SPACING_08};
       }
     }
     .cap-unified-select-upload-button {
       border: none;
-      padding-left: 15px;
+      padding-left: 0.9375rem;
     }
     .cap-unified-select-confirm-container {
       display: flex;
       align-items: center;
-      height: 48px;
-      padding: 7px;
-      border-top: 1px solid #ebecf0;
+      height: 3rem;
+      padding: 0.4375rem;
+      border-top: 0.0625rem solid ${styledVars.CAP_G08};
     }
     .cap-unified-select-confirm-button-group {
       display: flex;
-      padding-left: 8px;
+      padding-left: ${styledVars.SPACING_08};
       align-items: center;
       .cap-unified-select-confirm-button {
-        background-color: #6ebd6e;
-        height: 32px;
-        width: 94px;
+        background-color: ${styledVars.CAP_GREEN01};
+        height: 2rem;
+        width: 5.875rem;
       }
       .cap-unified-select-cancel-button {
         border: transparent;
         box-shadow: none;
-        width: 80px;
+        width: 5rem;
       }
     }
     .cap-unified-select-selected-count {
       display: flex;
       margin-left: auto; /* pushes to far right */
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 16px;
-      color: #5e6c84;
+      font-size: 0.75rem;
+      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 1rem;
+      color: ${styledVars.CAP_G04};
     }
     .cap-unified-select-search-container {
       .ant-input-affix-wrapper {
         border: none;
         box-shadow: none;
         border-radius: 0;
-        border-bottom: 1px solid transparent;
+        border-bottom: 0.0625rem solid transparent;
         transition: border-color 0.2s ease;
       }
 
       .ant-input-affix-wrapper:hover {
-        border-bottom: 1px solid #7a869a !important;
+        border-bottom: 0.0625rem solid ${styledVars.CAP_G11} !important;
         box-shadow: none;
       }
 
       .ant-input-affix-wrapper:focus-within {
-        border-bottom: 1px solid #091e42 !important;
+        border-bottom: 0.0625rem solid ${styledVars.CAP_G01} !important;
         box-shadow: none;
         outline: none;
       }
@@ -326,16 +353,16 @@ export const selectStyles = css`
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 40px;
-      border-top: 1px solid #EBECF0;
+      height: 2.5rem;
+      border-top: 0.0625rem solid #EBECF0;
       cursor: pointer;
-      color: #091E42;
+      color: ${styledVars.CAP_G01};
       &:hover{
-        background-color: #EBECF0;
+        background-color: ${styledVars.CAP_G08};
       }
       .cap-unified-select-tree-clear-label{
-        font-size: 14px;
-        font-weight: 400;
+        font-size: 0.875rem;
+        font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
       }
     }
   }
@@ -351,9 +378,15 @@ export const selectStyles = css`
         }
       }
       .ant-select-tree-indent {
-        margin-left: 15px;
+        margin-left: 0.9375rem;
       }
     }
+    .multiTreeSelect-popup-container {
+        min-width: 17.5rem;
+    }
+    .treeSelect-popup-container {
+        min-width: 17.5rem;
+    }
 
     /* Single Select */
     .select-popup-container {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.62",
+  "version": "0.1.6-alpha.64",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [