@capillarytech/blaze-ui 0.1.6-alpha.41 → 0.1.6-alpha.43

package/CapIcon/CapIcon.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import * as AntdIcons from '@ant-design/icons';
+import { IconWrapper, BackgroundWrapper, iconStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const StyledIcon = styled.span`
+  ${iconStyles}
+`;
+
+const getSvgIcon = (type, svgProps = {}) => {
+  const icons = {
+    // Add your SVG icons here if needed
+  };
+
+  const IconComponent = icons[type];
+  return IconComponent ? <IconComponent {...svgProps} /> : null;
+};
+
+const getAntIcon = (type) => {
+  // Convert kebab-case to PascalCase for Ant Design icon naming
+  const pascalCase = type
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+    
+  // Try different naming conventions
+  const iconName = `${pascalCase}Outlined`;
+  const iconNameFilled = `${pascalCase}Filled`;
+  const iconNameTwoTone = `${pascalCase}TwoTone`;
+  
+  return AntdIcons[iconName] || AntdIcons[iconNameFilled] || AntdIcons[iconNameTwoTone];
+};
+
+const CapIcon = ({
+  type,
+  size = 'm',
+  style = {},
+  className = '',
+  disabled = false,
+  spin = false,
+  rotate,
+  withBackground = false,
+  backgroundProps = {},
+  onClick,
+  textLabel,
+  component,
+  svgProps = {},
+  allowSvg = true,
+  ...rest
+}) => {
+  const handleClick = (e) => {
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  // Render custom component if provided
+  if (component) {
+    return (
+      <IconWrapper
+        className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+        style={style}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        {component}
+        {textLabel}
+      </IconWrapper>
+    );
+  }
+
+  // Try to get SVG icon if allowSvg is true
+  const svgIcon = allowSvg && type ? getSvgIcon(type, svgProps) : null;
+
+  // If SVG icon exists and allowSvg is true, use it
+  if (svgIcon) {
+    const iconComponent = (
+      <IconWrapper
+        className={classnames('cap-icon', size, { spin }, { 'with-text-label': textLabel }, className)}
+        style={{ 
+          ...style,
+          transform: rotate ? `rotate(${rotate}deg)` : undefined 
+        }}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        {svgIcon}
+        {textLabel}
+      </IconWrapper>
+    );
+
+    return withBackground ? (
+      <BackgroundWrapper size={size} {...backgroundProps}>
+        {iconComponent}
+      </BackgroundWrapper>
+    ) : iconComponent;
+  }
+
+  // Try to get Ant Design icon
+  const AntIcon = type ? getAntIcon(type) : null;
+
+  if (AntIcon) {
+    const iconComponent = (
+      <IconWrapper
+        className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+        style={style}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        <AntIcon 
+          spin={spin} 
+          rotate={rotate}
+        />
+        {textLabel}
+      </IconWrapper>
+    );
+
+    return withBackground ? (
+      <BackgroundWrapper size={size} {...backgroundProps}>
+        {iconComponent}
+      </BackgroundWrapper>
+    ) : iconComponent;
+  }
+
+  // Fallback: render an empty icon container
+  return (
+    <IconWrapper
+      className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+      style={style}
+      disabled={disabled}
+      onClick={handleClick}
+      {...rest}
+    >
+      {textLabel}
+    </IconWrapper>
+  );
+};
+
+CapIcon.propTypes = {
+  type: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  style: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  spin: PropTypes.bool,
+  rotate: PropTypes.number,
+  withBackground: PropTypes.bool,
+  backgroundProps: PropTypes.object,
+  onClick: PropTypes.func,
+  textLabel: PropTypes.node,
+  component: PropTypes.node,
+  svgProps: PropTypes.object,
+  allowSvg: PropTypes.bool,
+};
+
+CapIcon.defaultProps = {
+  size: 'm',
+  style: {},
+  className: '',
+  disabled: false,
+  spin: false,
+  withBackground: false,
+  backgroundProps: {},
+  svgProps: {},
+  allowSvg: true,
+};
+
+// Create AntIcon subcomponent for backward compatibility
+const AntIcon = styled.i`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+CapIcon.AntIcon = AntIcon;
+
+export default withStyles(CapIcon, iconStyles);

package/CapIcon/index.js

@@ -0,0 +1,3 @@
+import CapIcon from './CapIcon';
+
+export default CapIcon;

package/CapIcon/styles.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  
+  &.xs {
+    font-size: 12px;
+    width: 12px;
+    height: 12px;
+  }
+  
+  &.s {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+  
+  &.m {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
+  
+  &.l {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  &.with-text-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+`;
+
+export const BackgroundWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  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')};
+`;
+
+export const iconStyles = css`
+  &.cap-icon {
+    display: inline-flex;
+    align-items: center;
+    
+    .anticon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    &.spin {
+      animation: rotate 2s linear infinite;
+    }
+  }
+  
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;

package/CapLabel/CapLabel.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+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,
+  type = 'label1',
+  className = '',
+  style = {},
+  fontWeight,
+  lineHeight,
+  ...rest
+}) => {
+  const typeStyles = getLabelTypeStyles(type);
+
+  return (
+    <StyledLabelDiv
+      className={classnames('cap-label', type, className)}
+      style={style}
+      typeStyles={typeStyles}
+      fontWeight={fontWeight}
+      lineHeight={lineHeight}
+      {...rest}
+    >
+      {children}
+    </StyledLabelDiv>
+  );
+};
+
+CapLabel.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lineHeight: PropTypes.string,
+};
+
+CapLabel.defaultProps = {
+  type: 'label1',
+  className: '',
+  style: {},
+};
+
+// 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}
+    >
+      {children}
+    </StyledLabelSpan>
+  );
+})`
+  ${labelStyles}
+`;
+
+CapLabelInline.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lineHeight: PropTypes.string,
+};
+
+CapLabelInline.defaultProps = {
+  type: 'label1',
+  className: '',
+  style: {},
+};
+
+// Attach the static method
+CapLabel.CapLabelInline = CapLabelInline;
+
+export default withStyles(CapLabel, labelStyles);

package/CapLabel/index.js

@@ -0,0 +1,3 @@
+import CapLabel from './CapLabel';
+
+export default CapLabel;

package/CapLabel/styles.js

@@ -0,0 +1,259 @@
+import styled, { css } from 'styled-components';
+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'};
+  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  margin: 0;
+  padding: 0;
+`;
+
+export const StyledLabelSpan = styled.span`
+  font-family: ${styledVars.FONT_FAMILY};
+  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
+  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
+  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  margin: 0;
+  padding: 0;
+`;
+
+export const labelStyles = css`
+  &.cap-label {
+    font-family: ${styledVars.FONT_FAMILY};
+    
+    &.label1 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label2 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label3 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G05};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label4 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label5 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label6 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G06};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label7 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label8 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label9 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      line-height: 16px;
+      font-weight: normal;
+    }
+    
+    &.label10 {
+      font-size: 12px;
+      color: ${styledVars.CAP_WHITE};
+      line-height: 16px;
+      font-weight: normal;
+    }
+    
+    &.label11 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label12 {
+      font-size: 12px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label13 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G05};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label14 {
+      font-size: 14px;
+      color: #676e7c;
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label15 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label16 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label17 {
+      font-size: 16px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label18 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label19 {
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: normal;
+      color: rgba(0, 0, 0, 0.87);
+    }
+    
+    &.label20 {
+      font-size: 14px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label21 {
+      font-size: 12px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label22 {
+      font-size: 24px;
+      color: ${styledVars.CAP_G04};
+      line-height: 28px;
+      font-weight: normal;
+    }
+    
+    &.label23 {
+      font-size: 14px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label24 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 400;
+      line-height: 20px;
+    }
+    
+    &.label25 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 500;
+      line-height: 20px;
+    }
+    
+    &.label26 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label27 {
+      font-size: 12px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: 16px;
+    }
+    
+    &.label28 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+    
+    &.label29 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label30 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label31 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 400;
+      line-height: 16px;
+    }
+    
+    &.label32 {
+      line-height: 20px;
+      font-size: 14px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: 500;
+    }
+    
+    &.label33 {
+      font-size: 14px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+`;

package/CapRow/CapRow.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { StyledRow, rowStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const CapRow = ({
+  children,
+  className = '',
+  style = {},
+  justify = 'start',
+  align = 'top',
+  gutter = 0,
+  wrap = true,
+  type,
+  width,
+  height,
+  margin,
+  padding,
+  prefixCls = 'ant-row',
+  fullWidth = false,
+  fullHeight = false,
+  fillSpace = false,
+  responsive = true,
+  vertical = false,
+  noWrap = false,
+  gap = null,
+  ...rest
+}) => {
+  // Use either the gap property or gutter for spacing
+  const gutterValue = gap !== null ? null : gutter;
+  const wrapValue = noWrap ? false : wrap;
+
+  return (
+    <StyledRow
+      className={classnames(
+        'cap-row-v2',
+        {
+          'with-custom-width': width,
+          'with-custom-height': height,
+          'fill-space': fillSpace,
+          'full-width': fullWidth,
+          'full-height': fullHeight,
+          'ant-row-no-wrap': noWrap,
+          'with-gap': gap !== null,
+        },
+        className
+      )}
+      style={{
+        ...(gap !== null ? { gap: typeof gap === 'number' ? `${gap}px` : gap } : {}),
+        ...style,
+      }}
+      justify={justify}
+      align={align}
+      gutter={gutterValue}
+      wrap={wrapValue}
+      type={type}
+      width={width}
+      height={height}
+      margin={margin}
+      padding={padding}
+      prefixCls={prefixCls}
+      fullWidth={fullWidth}
+      fullHeight={fullHeight}
+      fillSpace={fillSpace}
+      responsive={responsive}
+      vertical={vertical}
+      {...rest}
+    >
+      {children}
+    </StyledRow>
+  );
+};
+
+CapRow.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
+  gutter: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+  wrap: PropTypes.bool,
+  type: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  prefixCls: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  fillSpace: PropTypes.bool,
+  responsive: PropTypes.bool,
+  vertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  gap: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.string,
+  ]),
+};
+
+CapRow.defaultProps = {
+  className: '',
+  style: {},
+  justify: 'start',
+  align: 'top',
+  gutter: 0,
+  wrap: true,
+  prefixCls: 'ant-row',
+  fullWidth: false,
+  fullHeight: false,
+  fillSpace: false,
+  responsive: true,
+  vertical: false,
+  noWrap: false,
+};
+
+export default withStyles(CapRow, rowStyles);

package/CapRow/index.js

@@ -0,0 +1,3 @@
+import CapRow from './CapRow';
+
+export default CapRow;

package/CapRow/styles.js

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+import { Row } from 'antd-v5';
+import * as styledVars from '../styled/variables';
+
+export const StyledRow = styled(Row)`
+  width: ${({ width, fullWidth }) => (fullWidth ? '100%' : width || 'auto')};
+  height: ${({ height, fullHeight }) => (fullHeight ? '100%' : height || 'auto')};
+  margin: ${({ margin }) => margin || 'inherit'};
+  padding: ${({ padding }) => padding || 'inherit'};
+  ${({ responsive }) => !responsive && css`
+    display: flex;
+    flex-wrap: wrap;
+  `};
+  ${({ fillSpace }) => fillSpace && css`
+    flex: 1;
+  `};
+`;
+
+export const rowStyles = css`
+  &.cap-row-v2 {
+    &.with-custom-width {
+      width: auto;
+    }
+    
+    &.with-custom-height {
+      height: auto;
+    }
+    
+    &.fill-space {
+      flex: 1;
+    }
+    
+    &.full-width {
+      width: 100%;
+    }
+    
+    &.full-height {
+      height: 100%;
+    }
+
+    &.ant-row-no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &.with-gap {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+  }
+`;

package/CapTooltip/CapTooltip.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'antd-v5';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { tooltipStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const StyledTooltip = styled(Tooltip)`
+  ${tooltipStyles}
+`;
+
+const CapTooltip = ({
+  title,
+  children,
+  placement = 'top',
+  visible,
+  defaultVisible = false,
+  trigger = 'hover',
+  destroyTooltipOnHide = false,
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  overlayClassName = '',
+  overlayStyle,
+  onVisibleChange,
+  align,
+  arrowPointAtCenter = false,
+  autoAdjustOverflow = true,
+  getPopupContainer,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <StyledTooltip
+      title={title}
+      placement={placement}
+      open={visible}
+      defaultOpen={defaultVisible}
+      trigger={trigger}
+      destroyTooltipOnHide={destroyTooltipOnHide}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
+      overlayClassName={classnames('cap-tooltip-overlay-v2', overlayClassName)}
+      overlayStyle={overlayStyle}
+      onOpenChange={onVisibleChange}
+      align={align}
+      arrow={{ pointAtCenter: arrowPointAtCenter }}
+      autoAdjustOverflow={autoAdjustOverflow}
+      getPopupContainer={getPopupContainer}
+      className={classnames('cap-tooltip-v2', className)}
+      {...rest}
+    >
+      {children}
+    </StyledTooltip>
+  );
+};
+
+CapTooltip.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.node,
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  visible: PropTypes.bool,
+  defaultVisible: PropTypes.bool,
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  destroyTooltipOnHide: PropTypes.bool,
+  mouseEnterDelay: PropTypes.number,
+  mouseLeaveDelay: PropTypes.number,
+  overlayClassName: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  onVisibleChange: PropTypes.func,
+  align: PropTypes.object,
+  arrowPointAtCenter: PropTypes.bool,
+  autoAdjustOverflow: PropTypes.bool,
+  getPopupContainer: PropTypes.func,
+  className: PropTypes.string,
+};
+
+CapTooltip.defaultProps = {
+  placement: 'top',
+  defaultVisible: false,
+  trigger: 'hover',
+  destroyTooltipOnHide: false,
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  overlayClassName: '',
+  arrowPointAtCenter: false,
+  autoAdjustOverflow: true,
+  className: '',
+};
+
+export default withStyles(CapTooltip, tooltipStyles);

package/CapTooltip/index.js

@@ -0,0 +1,3 @@
+import CapTooltip from './CapTooltip';
+
+export default CapTooltip;

package/CapTooltip/styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const tooltipStyles = css`
+  &.cap-tooltip-overlay-v2 {
+    .ant-tooltip-inner {
+      background-color: ${styledVars.CAP_G01};
+      color: ${styledVars.CAP_WHITE};
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: ${styledVars.RADIUS_04};
+      max-width: 300px;
+      word-wrap: break-word;
+    }
+
+    .ant-tooltip-arrow::before {
+      background-color: ${styledVars.CAP_G01};
+    }
+  }
+
+  .button-disabled-tooltip-wrapper {
+    display: inline-block;
+    cursor: not-allowed;
+
+    .ant-btn[disabled] {
+      pointer-events: none;
+    }
+  }
+`;
+
+export const StyledTooltipWrapper = styled.div`
+  display: inline-block;
+`;

package/CapTooltipWithInfo/CapTooltipWithInfo.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CapTooltip, CapIcon } from '../';
+import withStyles from '../utils/withStyles';
+import { tooltipWithInfoStyles } from './styles';
+
+/**
+ * CapTooltipWithInfo - A component that combines an info icon with a tooltip
+ * for displaying additional information on hover or other trigger events.
+ */
+const CapTooltipWithInfo = ({
+  title,
+  iconSize = 's',
+  iconType = 'info-circle',
+  placement = 'top',
+  trigger = 'hover',
+  className = '',
+  tooltipProps = {},
+  iconProps = {},
+  ...rest
+}) => {
+  return (
+    <span 
+      className={classnames('cap-tooltip-with-info', className)} 
+      {...rest}
+    >
+      <CapTooltip
+        title={title}
+        placement={placement}
+        trigger={trigger}
+        {...tooltipProps}
+      >
+        <span className="cap-tooltip-with-info-icon">
+          <CapIcon 
+            type={iconType}
+            size={iconSize}
+            {...iconProps}
+          />
+        </span>
+      </CapTooltip>
+    </span>
+  );
+};
+
+CapTooltipWithInfo.propTypes = {
+  /** Content to display in the tooltip */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Size of the info icon */
+  iconSize: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  /** Type of icon to display */
+  iconType: PropTypes.string,
+  /** Placement of the tooltip relative to the icon */
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  /** How the tooltip is triggered */
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  /** Additional class name */
+  className: PropTypes.string,
+  /** Additional props passed to the CapTooltip component */
+  tooltipProps: PropTypes.object,
+  /** Additional props passed to the CapIcon component */
+  iconProps: PropTypes.object,
+};
+
+CapTooltipWithInfo.defaultProps = {
+  iconSize: 's',
+  iconType: 'info-circle',
+  placement: 'top',
+  trigger: 'hover',
+  className: '',
+  tooltipProps: {},
+  iconProps: {},
+};
+
+export default withStyles(CapTooltipWithInfo, tooltipWithInfoStyles);

package/CapTooltipWithInfo/index.js

@@ -0,0 +1,3 @@
+import CapTooltipWithInfo from './CapTooltipWithInfo';
+
+export default CapTooltipWithInfo;

package/CapTooltipWithInfo/styles.js

@@ -0,0 +1,22 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const tooltipWithInfoStyles = css`
+  &.cap-tooltip-with-info {
+    display: inline-flex;
+    align-items: center;
+    cursor: default;
+    
+    .cap-tooltip-with-info-icon {
+      color: ${styledVars.CAP_G06};
+      margin-left: 4px;
+      cursor: help;
+      
+      &:hover {
+        color: ${styledVars.CAP_G07};
+      }
+    }
+  }
+`;
+
+export default tooltipWithInfoStyles;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -2,13 +2,10 @@
 import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { TreeSelect, Tooltip, Input, Button } from 'antd-v5';
+import { TreeSelect, Input, Button } from 'antd-v5';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
-import uploadIcon from '../assets/upload.svg';
-
-import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
-
+import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
 import withStyles from '../utils/withStyles';
 import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
 
@@ -57,10 +54,14 @@ const CapUnifiedSelect = ({
   };
 
   const NoResult = memo(({ noResultText, className }) => (
-    <div className={classnames(className, "cap-unified-select-no-result")}>
-      <WarningFilled className="cap-unified-select-no-result-icon" />
-      <div className="cap-unified-select-no-result-text">{noResultText}</div>
-    </div>
+    <CapRow 
+      className={classnames(className, "cap-unified-select-no-result")} 
+      align="middle" 
+      gap={8}
+    >
+      <CapIcon type="warning" size="s" />
+      <CapLabel className="cap-unified-select-no-result-text">{noResultText}</CapLabel>
+    </CapRow>
   ));
 
   const getFilteredTreeData = useCallback((data, search) => {
@@ -137,10 +138,10 @@ const CapUnifiedSelect = ({
   const suffix = useMemo(() => {
     return isMulti && Array.isArray(value) && value?.length > 1 ? (
       <>
-        <span>+{value.length - 1} more <DownOutlined /></span>
+        <span>+{value.length - 1} more <CapIcon type="down" size="s" /></span>
       </>
     ) : (
-      <DownOutlined />
+      <CapIcon type="down" size="s" />
     );
   }, [isMulti, value]);
 
@@ -157,15 +158,17 @@ const CapUnifiedSelect = ({
     return (
       <>
       <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
-        {headerLabel && <label type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</label>}
+        {headerLabel && <CapLabel type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</CapLabel>}
         {tooltip && (
-          <Tooltip title={tooltip} rootClassName="cap-unified-tooltip" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
-            <InfoCircleOutlined />
-          </Tooltip>
+          <CapTooltipWithInfo 
+            title={tooltip} 
+            className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}
+            iconProps={{ disabled }}
+          />
         )}
       </HeaderWrapper>
       <div className="cap-unified-select-header-byline-text">
-        {bylineText && <label className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</label>}
+        {bylineText && <CapLabel className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</CapLabel>}
       </div>
       </>
     );
@@ -185,46 +188,55 @@ const CapUnifiedSelect = ({
       return (
         <div className={classnames(popupClassName, `${type}-popup-container`)}>
           {showSearch && (
-            <div className={classnames("cap-unified-select-search-container")}>
+            <CapRow className={classnames("cap-unified-select-search-container")} align="middle">
               <Input
-                prefix={<SearchOutlined style={{ color: styledVars.CAP_G06 }} />}
+                prefix={<CapIcon type="search" size="s" style={{ color: styledVars.CAP_G06 }} />}
                 placeholder="Search"
                 variant="borderless"
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 onKeyDown={e => e.stopPropagation()}
               />
-            </div>
+            </CapRow>
             )}
           {isMulti && showUpload && (
-            <div className={classnames("cap-unified-select-upload-container")}>
+            <CapRow className={classnames("cap-unified-select-upload-container")} align="middle">
              <Button
               type="link"
-              icon={<img src={uploadIcon} alt="upload" />}
+              icon={<CapIcon type="upload" size="s" />}
               onClick={() => {}}
               className={classnames("cap-unified-select-upload-button")}
             >
               Upload
             </Button>
-            </div>
+            </CapRow>
           )}
           {isMulti && currentItems.length > 0 && (
-            <div className={classnames("cap-unified-select-select-all-container")} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
-                <input type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={e => e.stopPropagation()} />
-              <label className={classnames("cap-unified-select-select-all-label")}>Select all</label>
-            </div>
+            <CapRow 
+              className={classnames("cap-unified-select-select-all-container")} 
+              onClick={e => { e.stopPropagation(); handleSelectAll(); }}
+              align="middle"
+              gap={8}
+            >
+              <input type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={e => e.stopPropagation()} />
+              <CapLabel className={classnames("cap-unified-select-select-all-label")}>Select all</CapLabel>
+            </CapRow>
           )}
 
           {currentItems.length === 0 ? <NoResult noResultText={noResultText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
 
           {currentItems.length > 0 && isMulti && (
-            <div className={classnames("cap-unified-select-confirm-container")}>
-              <div>
+            <CapRow 
+              className={classnames("cap-unified-select-confirm-container")} 
+              justify="space-between" 
+              align="middle"
+            >
+              <CapRow gap={8}>
                 <Button type="primary" size="small" className={classnames("cap-unified-select-confirm-button")} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
                 <Button type="text" size="small" onClick={e => { e.stopPropagation(); handleCancel(); }}>Cancel</Button>
-              </div>
-              {selectedCount > 0 && <span className={classnames("cap-unified-select-selected-count")}>{selectedCount} selected</span>}
-            </div>
+              </CapRow>
+              {selectedCount > 0 && <CapLabel className={classnames("cap-unified-select-selected-count")}>{selectedCount} selected</CapLabel>}
+            </CapRow>
           )}
         </div>
       );
@@ -257,7 +269,7 @@ const CapUnifiedSelect = ({
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
         />
-        {isError && <div className={classnames("cap-unified-select-status")}>{errorMessage}</div>}
+        {isError && <CapLabel className={classnames("cap-unified-select-status")} style={{ color: 'red' }}>{errorMessage}</CapLabel>}
       </>
     );
   };

package/index.js

@@ -1,8 +1,13 @@
 // Import and export all components
+export { default as CapIcon } from './CapIcon';
 export { default as CapInput } from './CapInput';
+export { default as CapLabel } from './CapLabel';
+export { default as CapRow } from './CapRow';
 export { default as CapSkeleton } from './CapSkeleton';
 export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
+export { default as CapTooltip } from './CapTooltip';
+export { default as CapTooltipWithInfo } from './CapTooltipWithInfo';
 export { default as CapUnifiedSelect } from './CapUnifiedSelect';
 
 // Export utilities

package/package.json

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