@capillarytech/blaze-ui 0.1.6-alpha.61 → 0.1.6-alpha.63

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/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/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?.(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,
-  onCancel,
-  noResultCustomText = 'No results found',
-  noResultCustomIcon = 'warning',
+  clearText,
+  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]);
@@ -192,7 +192,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 +206,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 || treeMaps?.nodeMap?.[firstLeafValue]?.title || null;
     }
     return null;
   }, [isMulti, displayValue, treeMaps]);
@@ -220,11 +220,12 @@ const CapUnifiedSelect = ({
     onConfirm?.(tempValue);
   }, [onChange, onConfirm, tempValue]);
 
-  const handleCancel = useCallback(() => {
-    setTempValue(value);
+  const handleClearAll = useCallback(() => {
+    setTempValue([]);
+    onChange?.([]);
     setDropdownOpen(false);
-    onCancel?.();
-  }, [value, onCancel]);
+  }, [onChange]);
+  
 
   const handleDropdownVisibilityChange = useCallback((open) => {
     if (!open && !customPopupRender) {
@@ -332,9 +333,9 @@ const CapUnifiedSelect = ({
                   type="text"
                   className="cap-unified-select-cancel-button"
                   size="small"
-                  onClick={handleCancel}
+                  onClick={handleClearAll}
                 >
-                  Cancel
+                  Clear all
                 </Button>
                 <CapLabel className="cap-unified-select-selected-count">
                   {selectedLeafCount} selected
@@ -342,6 +343,12 @@ const CapUnifiedSelect = ({
               </div>
             </div>
           )}
+
+          {(type === 'select' || type === 'treeSelect') && (
+            <CapRow className="cap-unified-select-tree-clear-container" onClick={handleClearAll}>
+              <CapLabel className="cap-unified-select-tree-clear-label">{clearText}</CapLabel>
+            </CapRow>
+          )}
         </div>
       );
     },
@@ -358,7 +365,7 @@ const CapUnifiedSelect = ({
       type,
       tempValue,
       handleConfirm,
-      handleCancel,
+      handleClearAll,
       popoverClassName,
       className,
       selectedLeafCount,
@@ -430,12 +437,12 @@ CapUnifiedSelect.propTypes = {
   showSearch: PropTypes.bool,
   searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
   onConfirm: PropTypes.func,
-  onCancel: PropTypes.func,
   isError: PropTypes.bool,
   errorMessage: PropTypes.string,
   popupClassName: PropTypes.string,
   showUpload: PropTypes.bool,
   onUpload: PropTypes.func,
+  clearText: PropTypes.string,
 };
 
 CapUnifiedSelect.defaultProps = {
@@ -444,6 +451,7 @@ CapUnifiedSelect.defaultProps = {
   searchBasedOn: 'label',
   noResultCustomText: 'No results found',
   noResultCustomIcon: 'warning',
+  clearText: 'Clear',
   options: [],
   allowClear: false,
   customPopupRender: true,

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: 1px 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};
     }
   }
 
@@ -114,13 +113,13 @@ export const selectStyles = css`
         background-color: transparent;
       }
       .ant-select-tree-treenode {
-        line-height: 40px;
-        margin-bottom: 0px;
+        line-height: 2.5rem;
+        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: 2px solid ${styledVars.CAP_G06};
+          border-radius: ${styledVars.RADIUS_04};
         }
         &:hover {
           background-color: #fffbe6;
@@ -131,11 +130,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 +142,21 @@ 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: 2px solid ${styledVars.CAP_PRIMARY.base} !important;
         &:hover {
-          background-color: #42b040;
-          border: 2px solid #42b040 !important;
+          background-color: ${styledVars.CAP_PRIMARY.base};
+          border: 2px solid ${styledVars.CAP_PRIMARY.base} !important;
         }
       }
       .ant-select-tree-switcher .ant-select-tree-switcher-icon {
-        font-size: 12px;
+        font-size: 0.75rem;
       }
     }
     .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 +165,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: 1px 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: 1px 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: 2px 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: 2px 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,69 +234,67 @@ 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: 1px 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: 1px solid ${styledVars.CAP_G08};
     }
     .cap-unified-select-confirm-button-group {
       display: flex;
       padding-left: 8px;
       align-items: center;
-      width: 100%; /* so it can push the label */
-      button {
-        height: 32px;
-        width: 94px;
-      }
       .cap-unified-select-confirm-button {
-        background-color: #6ebd6e;
+        background-color: ${styledVars.CAP_GREEN01};
+        height: 2rem;
+        width: 5.875rem;
       }
       .cap-unified-select-cancel-button {
         border: transparent;
         box-shadow: none;
+        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-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      line-height: 1rem;
+      color: ${styledVars.CAP_G04};
     }
     .cap-unified-select-search-container {
       .ant-input-affix-wrapper {
@@ -309,12 +306,12 @@ export const selectStyles = css`
       }
 
       .ant-input-affix-wrapper:hover {
-        border-bottom: 1px solid #7a869a !important;
+        border-bottom: 1px solid ${styledVars.CAP_G11} !important;
         box-shadow: none;
       }
 
       .ant-input-affix-wrapper:focus-within {
-        border-bottom: 1px solid #091e42 !important;
+        border-bottom: 1px solid ${styledVars.CAP_G01} !important;
         box-shadow: none;
         outline: none;
       }
@@ -324,6 +321,22 @@ export const selectStyles = css`
         box-shadow: none !important;
       }
     }
+    .cap-unified-select-tree-clear-container{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 2.5rem;
+      border-top: 1px solid #EBECF0;
+      cursor: pointer;
+      color: ${styledVars.CAP_G01};
+      &:hover{
+        background-color: ${styledVars.CAP_G08};
+      }
+      .cap-unified-select-tree-clear-label{
+        font-size: 0.875rem;
+        font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
+      }
+    }
   }
 
   &.custom-popup-container {
@@ -337,7 +350,7 @@ export const selectStyles = css`
         }
       }
       .ant-select-tree-indent {
-        margin-left: 15px;
+        margin-left: 0.9375rem;
       }
     }
 

package/package.json

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