How to use the @arch-ui/theme.colors.N30 function in @arch-ui/theme

const Icon = styled.div(({ checked, isDisabled, isFocus, isActive, isHover }) => {
  // background
  let bg = colors.N10;
  if (isDisabled && checked) {
    bg = colors.N30;
  } else if (isActive) {
    bg = checked ? colors.B.D10 : colors.N20;
  } else if ((isFocus || isHover) && !checked) {
    bg = colors.N15;
  } else if (checked) {
    bg = colors.B.base;
  }

  // fill
  let fill = 'white';
  if (isDisabled && checked) {
    fill = colors.N70;
  } else if (!checked) {
    fill = 'transparent';
  }

const NoResultsWrapper = ({ children, ...props }) => (
  <div>
    
    {children}
  </div>
);

export const inputStyles = (props = {}) => ({
  ...uniformHeight,
  backgroundColor: props.disabled ? colors.N10 : 'white',
  borderColor: colors.N20,
  color: 'inherit',
  width: '100%',

  ':hover': {
    borderColor: colors.N30,
    outline: 0,
  },

  ':focus': {
    borderColor: colors.primary,
    outline: 0,
  },

  '&[disabled]': {
    borderColor: colors.N15,
    backgroundColor: colors.N05,
  },

  ...(props.isMultiline
    ? {
        lineHeight: 'inherit',

<input type="text" value="{value}" name="item-search" placeholder="Search" id="{id}" autocomplete="off" autocapitalize="off">
      <div>
        {isFetching ? (</div>

<div>
        {isLoading ? (
          
        ) : (
          
        )}
      </div>
    
  );
};

<div>
        {isFetching ? (
          
        ) : (
          
        )}
      </div>
    
  );
}

<input type="text" value="{value}" name="item-search" placeholder="Search" id="{id}" autocomplete="off" autocapitalize="off">
      <div>
        </div>

<div>
        
      </div>
    
  ) : (
    
      {ref =&gt; (
        
      )}
    
  );
}

const focusStyles = isFocused
      ? {
          borderColor: colors.primary,
          boxShadow: `inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 0 3px ${colors.B.A20}`,
          outline: 0,
        }
      : null;
    return {
      ...provided,
      backgroundColor: 'white',
      borderColor: colors.N20,
      fontSize: '1rem',
      minHeight: 35,
      minWidth: '200px',
      ':hover': { borderColor: colors.N30 },
      ...focusStyles,
    };
  },
  clearIndicator: indicatorStyles,

export default function PageError({ children, Icon, ...props }) {
  return (
    
      <div>
        
        {children}
      </div>
    
  );
}
PageError.defaultProps = {